账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue中echarts自适应不起作用是为啥
    34
    0

    <div :id="id"></div>
    </template>
    <script>
    import echarts from 'echarts'

    export default {
    data () {
        return {
            charts: ''
        }
    },
    props:["id","opinion","opinionData"],
    mounted(){
        this.$nextTick(function() {
            this.drawPie(this.id)
            
        })
        let _this=this;
       window.addEventListener("resize",function () {
             _this.charts.resize();
        })
    },
    methods:{
        drawPie(id){
            this.charts = echarts.init(document.getElementById(id))
           for(var i = 0;i<this.opinionData.length;i++){//修改数据  每一条添加一个type:'bar'
                   this.opinionData[i] = {
                                   type :'bar',
                                   data:this.opinionData[i].data,
                                   name:this.opinionData[i].name
                               }
           }
           this.charts.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:this.opinion
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : this.opinionData
            })
        }
    }
    
}

    </script>
    <style scoped>

    * {
    margin: 0;
    padding: 0;
    list-style: none;
}

    </style>

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 烤肉火锅 普通会员 1楼

      在 Vue 中，如果你尝试使用 echarts 自动缩放图表，但自适应不起作用，可能有以下原因：

      1. 初始化时没有正确设置配置项：确保在初始化图表时，你已经正确设置了配置项，如 option 或 chartOption。请参考 echarts 的官方文档以了解正确的设置方法。

      2. 引入echarts库：确保你已经正确引入了 echarts 库。在你的 Vue 项目中，可以使用如下命令：

      import echarts from 'echarts'

      1. 浏览器设置：请确保你的浏览器已经正确设置了缩放和旋转功能。你可以使用以下命令查看浏览器设置：

      window.addEventListener('resize', function() { console.log('浏览器缩放比例：', window.innerWidth / window.innerHeight) })

      1. 引用 echarts.init 方法：请确保在尝试使用图表之前，已经正确地引入了 echarts.init 方法。例如：

      import echarts from 'echarts' const myChart = echarts.init(document.getElementById('main'))

      1. 图表元素的类型：请确保你已经正确选择了图表元素的类型。例如，如果你的图表元素是一个 <canvas> 元素，你可以尝试将 option 设置为：

      option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'My Data', type: 'bar', data: [10, 20, 30, 40, 50, 60, 70] }] }

      如果以上方法都无法解决问题，建议你进一步排查具体的代码逻辑和配置，以便找到问题的根源。

    0 打赏 回复
    • 疯到世界奔溃 普通会员 2楼

      在 Vue 中，如果你尝试使用 echarts 自动缩放图表，但自适应不起作用，可能有以下原因：

      1. 初始化时没有正确设置配置项：确保在初始化图表时，你已经正确设置了配置项，如 option 或 chartOption。请参考 echarts 的官方文档以了解正确的设置方法。

      2. 引入echarts库：确保你已经正确引入了 echarts 库。在你的 Vue 项目中，可以使用如下命令：

      import echarts from 'echarts'

      1. 浏览器设置：请确保你的浏览器已经正确设置了缩放和旋转功能。你可以使用以下命令查看浏览器设置：

      window.addEventListener('resize', function() { console.log('浏览器缩放比例：', window.innerWidth / window.innerHeight) })

      1. 引用 echarts.init 方法：请确保在尝试使用图表之前，已经正确地引入了 echarts.init 方法。例如：

      import echarts from 'echarts' const myChart = echarts.init(document.getElementById('main'))

      1. 图表元素的类型：请确保你已经正确选择了图表元素的类型。例如，如果你的图表元素是一个 <canvas> 元素，你可以尝试将 option 设置为：

      option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'My Data', type: 'bar', data: [10, 20, 30, 40, 50, 60, 70] }] }

      如果以上方法都无法解决问题，建议你进一步排查具体的代码逻辑和配置，以便找到问题的根源。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部