vue动态更新Echart图表,数据改变,视图不更新问题

let brokenLineEchart= this.$echarts.init(document.getElementById("scatterEchart"));
brokenLineEchart.setOption({
  backgroundColor: '#ffffff',
  grid: { //Echarts组件 离容器的距离
    left: '5%',
    right: '2%',
    top: 80,
    bottom: '100',
    containLabel: true //是否包含坐标轴的刻度标签
  },
  legend: {//图例组件,点击哪个图例名称显示或隐藏对应的数据
    left : '8%',
    right : '0%',
    top: '300',
    // bottom : '0%',
    icon : 'circle',
    data: schoolArr
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器,坐标轴触发有效
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'//虚线 背景色
      },
    },
    textStyle:{
      align:'left'//悬浮窗字体居左
    }
  },
  color : color,
  dataset: {
    source: data
  },
  xAxis: {
    type: 'category',
    nameTextStyle: {
      fontFamily: "Arial",
    }
    // boundaryGap: false
  },
  yAxis: {
    gridIndex: 0,
    inverse: false
  },
  series: seriesArr
}, true);

关键点:setOption({},true) 第二个参数为true

你可能感兴趣的:(vue)