Vue项目中引入Echarts

最近前端产品中有数据统计分析的需求，需要展示多种图表，包括折线图、柱状图、饼图、热力图等。

最后选择了常用图表框架ECharts；

在vue项目中引入ECharts的步骤如下：

1、安装Echats

npm install echarts --save

2、项目main.js中引入Echarts

// 引入Echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、项目中使用，挂载一个图表到一个div标签上

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

export default {
  data() {
    return {
      //图表配置项对象
      middleChartExtend: {
        color: ["#5ACC23"],  //柱状图的柱子颜色
        tooltip: {           //是否显示提示工具
          show: true
        },
        xAxis: {             //X坐标配置项
          type: "category",
          axisPointer: { show: true },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
          ]
        },
        yAxis: {             //y坐标配置项
          type: "value",
          minInterval: 1,
          onZero: false,
          axisLine: {
            show: false,
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: "{value} min"
          },
          splitLine: {
            show: true,
            lineStyle: {
              // color: "#F5F7F8"
            }
          }
        },
        series: {             //图表内容数据配置项
          name: "平均时间",
          type: "bar",        //显示成柱状图
          barWidth: 10,       //柱子宽度为10
          data: []            //每项数据，动态赋予
        },
        grid: {               //图表属性配置项，一个图表对应一个grid
          top: "3%",
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true
        }
      },
      myMiddleChartObj: null        //图表对象
    };
  },
  methods: {
    getData(){   //获取数据并赋值给middleChartExtend.series.data

    },
    drawMiddleChart() {             //绘制图表方法
      this.myMiddleChartObj = this.$echarts.init(
        document.getElementById("myMiddleChart")
      );
      //将图表配置项赋给图表,true参数表示不和之前的数据合并
      this.myMiddleChartObj.setOption(this.middleChartExtend, true);   
    }
  },
  mounted() {
    this.drawMiddleChart();
  }

效果图如下：