Vue使用ECharts

1、安装

npm install echarts -S

2、在main.js文件中引入

import echarts from 'echarts'
Vue.use(echarts)
// 挂载全局
Vue.prototype.$echarts = echarts

3、
页面中

//html
<div id='demo' :style="{ width: '450px', height: '300px' }"></div>

//mounted
mounted(){
	this.initEcharts()
}

//methods
initEcharts() {
      let dom = document.getElementById("demo");
      if (!dom) return;
      let myCharts = this.$echarts.init(dom);
      let option = {
        color: ["#26B7FF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", 
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1", "2", "3", "4", "5", "6", "7"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "增加数量",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      };
      myCharts.setOption(option);
    }