关于数据更新或方法从新调用时echarts图表不更新不从新加载的解决办法

    
  echa(){
// 在每次echarts挂载前先用dispose()把之前的实例销毁这样每次执行函数时图表就都会从新加载
    this.$echarts.init(document.querySelector('.centerTop-body')).dispose()
      let charta = this.$echarts.init(document.querySelector('.centerTop-body'))
    var colors = ['#00FFFF', '#02FF67', '#675bba'];

let option = {
  //  backgroundColor: '#081736',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        top: '15%',
        // right: '3%',
        left: '4%',
        bottom: '15%'
    },
   dataZoom: [//条形图底部滚动条
        // {
        //   show: true,
        //   realtime: true,
        //   start: 0,
        //   end:50
        // },
        // {
        //   type: 'inside',
        //   realtime: true,
        //   start: 0,
        //   end: 50
        // }
      ],
    xAxis: [{
        type: 'category',
        axisLabel: {
            color: '#fff',
            interval:0
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#0a3e98'
            }
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#195384',
                type: "dotted",
            }
        },
        data: this.dayArry
    }],
    yAxis: [
        {
            type: 'value',
            name: this.Company,
            min: 0,
            position: 'left',
            nameTextStyle: {
                color: "#fff",
                fontSize: 11,
            },
            axisLine: {
                lineStyle: {
                    color: '#0a3e98'
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0a3e98',
                    type: "dotted",
                }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: "#fff",
                }
            },
        }
    ],
    // dataZoom: [
    //     {
    //       show: true,
    //       realtime: true,
    //       start: 0,
    //       end: 30
    //     },
    //     {
    //       type: 'inside',
    //       realtime: true,
    //       start: 0,
    //       end: 30
    //     }
    //   ],
    series: [{
        name: '吨数',
        type: 'bar',
        barWidth: 15, //柱子宽度
        barGap: 0.3, //柱子之间间距
        itemStyle: {
            normal: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                        offset: 0,
                        color: "#0896FF"
                    },
                    {
                        offset: 1,
                        color: "rgba(5,40,66,0.00)"
                    }
                ]),
            }
        },
        label:{
            normal: {
                show: true,
                position: "top",
                formatter: "{c}",
                color:'#fff'
            }
        },
        data: this.dataArry,
        // animationDuration: function (idx) {
        //     return idx * 1500 + 1000;
        // }
    }
    ]
};
 charta.setOption(option)
     window.addEventListener('resize', function () {
        charta.resize()
      });
},
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值