博客

vue整合echarts图表动态赋值没有效果的问题解决方法

1.这个问题的主要原因是因为第一次渲染echarts图表时series中的data为[]所以没有效果

2.解决办法：

要对echarts进行二次渲染,在获取数据之后在渲染一次echarts图表就能显示效果

例如：

init() {
      this.option = {
        color: ["#4e7ddf"],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['同比', '环比'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['投诉','意见','建议','举报','表扬','咨询','校核','服务申请','故障保修'],
          axisLabel: {
            interval: 0
          },
          axisTick: {
            show: false
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          axisTick: {
            show: false
          },
        },
        series: [
          {
            type: 'bar',
            barWidth: '40%',
            //data: [17,7,3,4,2,4,4,6,463]
            data: this.bar
          },
          {
            name: '同比',
            type: 'line',
            // data: [120, 132, 101, 134, 90, 230, 210,222,222],
            data: this.tongbi,
            //单独修改当前线条样式
            // lineStyle: {
            //   color: "#df9147",
            //   width: "2"
            // },
            symbol: 'circle',
            symbolSize: 6,    //小圆点的大小
            itemStyle: {
              color: '#df9147', //小圆点和线的颜色
            }
          },
          {
            name: '环比',
            type: 'line',
            //data: [220, 182, 191, 234, 290, 330, 310,222,222],
            data: this.huanbi,
            //单独修改当前线条样式
            // lineStyle: {
            //   color: "#56c2df",
            //   width: "2"
            // },
            symbol: 'circle',
            symbolSize: 6,    //小圆点的大小
            itemStyle: {
              color: '#56c2df',    //小圆点和线的颜色
            }
          }
        ]
      };
    
  // 这是第一次渲染
  mounted() {
    this.init()
  }

在获取数据之后进行第二次渲染：

 Promise.all([
        getDetail(xkey, {
          ':orgNo': this.orgNo
        })
      ]).then((res)=>{
        this.bar = res[0].data.data.map(({monthSum})=>{
          return monthSum
        })
        this.tongbi = res[0].data.data.map(({year_ratio})=>{
          return year_ratio
        })
        this.huanbi = res[0].data.data.map(({month_ratio})=>{
          return month_ratio
        })
        // 第二次渲染
        this.init()
      })

然后就能解决问题，希望能帮助大家解决问题，或者大家如果有更好的解决方法可以评论