欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 封装的echarts组件,多个页面调用数据不渲染问题

程序员文章站 2024-01-25 20:19:22
...

vue 封装的echarts组件,多个页面调用数据不渲染问题,抛弃使用id ,改用ref

  <div class="storEchprh" ref="echarts"></div>
  
  //这是要渲染echarts 图的div,引入echarts,
  //最重要的 (this.$refs.echarts)
  
  var echarts = require('echarts')
  this.myChart = echarts.init(this.$refs.echarts)
      var option = {

        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E5ECEC' // 修改网格线颜色
            }
          },
          data: xdata
        },
        yAxis: {
          type: 'value',
          name: '盈亏金额(元)',
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '会员盈亏',
            type: 'line',
            color: '#4A71F2',
            symbol: 'circle',
            data: ydata.memberProfit
          }
        ]
      }
      this.myChart.setOption(option, true)