Vue中使用echarts

一、安装echarts

npm install echarts //默认安装最新版本
npm install echarts@4.8.0 //安装指定版本

二、导入echarts

在 main.js 文件中引入，全局使用

import Vue from 'vue'
//引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //将echarts放在vue原型链上，使用this.$echarts即可调用

-------- 2021.5.16更新
当安装的echarts版本为最新版本，也就是v5版本不支持以上写法了，改为

import * as echarts from 'echarts';
// 按需引入
// import * as echarts from 'echarts/lib/echarts';
//参考官网 https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97

三、页面中使用

1、提供容器，并为容器设定宽高

<div  id="chart" style="width: 700px; height: 300px; background: #020f2b"></div>

2、在methods中

methods:{
	initChart() {
      let colorsList = ["#00EA9C"];
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: colorsList,
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      //容器
      let myChart = this.$echarts.init(document.getElementById("chart"));
      myChart.setOption(option);
      //页面缩放时，echart图跟随缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
}

3、在mounted中调用

mounted(){
	this.initChart()
}

四、最终效果

以上