vue 之 eachrts之数据更新，图表不跟新问题

vue 之 eachrts之数据更新，图表不跟新问题

• 这需要使用 watch监听器的方式，去监听数据的变化，还需要深层次的那种，才能

lineChart.vue 折线图组件

• 要点：

    watch: {
  		// 深层次监听 对象
      lineChartData: {
        handler(val) {
          this.getLineChart(val);
        },
        deep: true,
      },
    },
  

<template>
  <div class="line_chart">
    <div class="chart" ref="line_chart"></div>
  </div>
</template>

<script>
export default {
  name: "LineChart",
  props: {
    lineChartData: {
      type: Object,
      default() {
        return {};
      },
    },
    areaStyleColor: {
      type: Object,
      default() {
        return {};
      },
    },
    yScale: {
      type: Object,
      default() {
        return {
          max: 1100,
          min: 900,
          minInterval: 0,
          interval: 50, //每次增加几
        };
      },
    },
  },
  mounted() {
    this.getLineChart(this.lineChartData);
  },
  watch: {
		// 深层次监听 对象
    lineChartData: {
      handler(val) {
        this.getLineChart(val);
      },
      deep: true,
    },
  },
  methods: {
    getLineChart(lineChartData) {
      let lineChart = this.$echarts.init(this.$refs.line_chart);

      // 02：配置选项和数据
      let option = {
        xAxis: {
          type: "category",
          data: lineChartData.lineDataX, // x轴的数据
          axisTick: {
            show: false, //把x轴的坐标轴 刻度去掉
          },
          /*改变x轴颜色*/
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            textStyle: {
              fontSize: 10,
              color: "#666",
            },
          },
        },
        yAxis: {
          type: "value",
          // y轴刻度的设置
          max: this.yScale.max,
          min: this.yScale.min,
          minInterval: 0,
          interval: this.yScale.interval, //每次增加几
          axisLabel: {
            // y轴的字体
            textStyle: {
              fontSize: 10,
              color: "#666",
            },
          },
          axisTick: {
            show: false, //把y轴的坐标轴 刻度去掉
          },
          axisLine: {
            show: false, //是否显示坐标轴轴线。
          },
          splitLine: {
            lineStyle: {
              color: "#f8f8f8", // y轴的分割线
            },
          },
        },
        // 调整图的 位置
        grid: {
          left: "0",
          top: "10",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        series: [
          {
            data: lineChartData.lineData, // 折线图的数据

            type: "line",
            // 设置拐点 相关的
            symbolSize: 10,
            itemStyle: {
              borderColor: this.areaStyleColor.lineColor, //拐点颜色
              borderWidth: 3,
              color: "#333", //拐点文本
            },
            // y折轴线 的颜色
            lineStyle: {
              color: this.areaStyleColor.lineColor,
            },
            emphasis: {
              // 鼠标经过时：
              color: this.areaStyleColor.lineColor,
              borderColor: "#3987ed",
            },
            label: {
              normal: {
                show: true, // 折线上的文字是否显示
                // position: [-15, -18],
                position: lineChartData.position,
                fontSize: lineChartData.fontSize,
                // position: [-15, -10],
              },
            },

            // 渐变
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.areaStyleColor.from,
                },
                {
                  offset: 1,
                  color: this.areaStyleColor.to,
                },
              ]),
            },
          },
        ],
      };

      //03：把配置项给实例对象，显示数据
      lineChart.setOption(option);

      //04：自适应
      window.addEventListener("resize", function () {
        lineChart.resize();
      });
    },
  },
};
</script>
<style  lang="css" scoped>
.line_chart {
  width: 345px;
  height: 198px;
  background: #fff;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>

使用组件

• 使用组件 并且传递数据即可，按照需要传递的数据，进行传递即可！
• 假数据
  lineChartData

 {
    "lineDataX": [
      "11/01",
      "11/02",
      "11/03",
     "11/04",
      "11/05",
     "11/06",
    "11/07",
    ],
    "lineData": [
      "900",
      "1000",
      "888",
      "1233",
      "1000",
      "1022",
      "999",
    ]
  }

areaStyleColor 数据

      areaStyleColor: {
        from: "#32C5FF",
        to: "rgba(50,197,255,0.00)",
        lineColor: "#32C5FF",
      },