vue2中如何使用Echarts

安装

npm npm install echarts-vue-component

yarn yarn add echarts-vue-component

在main.js引入 Echarts

//  创建 Echarts组件
import ChartBlock from 'echarts-vue-component'
Vue.use(ChartBlock)

在页面里面引入

//script
import ChartBlock from 'echarts-vue-component'  //引入
export default {
  components: {ChartBlock},      ///实例组件
}，
data() {
   return {
      option: {          //渲染的值
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["actualData","expectedData"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "actualData",
            type: "line",
            stack: "Total",
            data: [100，150，200，240，160],
          },
          {
            name: "expectedData",
            type: "line",
            stack: "Total",
            data: [130，140，190，220，170],
          }
        ],
      },
    };
  },
  mounted() {
    this.$refs.chart.setOption(this.option);  //实例一下
  },

//页面内容
<template>
  <div>
    <chart-block style="width: 600px; height: 200px" ref="chart"></chart-block>
  </div>
</template>

当我们想要改变 Echarts 中的值时

//定义的方法
   echartsFn() {
       this.option.series[0].data = [100,200,250,210,150];  //改值
       this.$refs.chart.setOption(this.option);  //重新实例
    },

option.series里面的data必须是数组

当我们数据里面的内容是这样的[ 120, 82, 91, 154, 162, 140, 130, __ob__: Observer ]

可以用JSON.parse(JSON.stringify(该数组))来变成数组