在Vue中使用Echarts图表

今天记录下在vue项目中如何使用Echarts图表

 最终效果图

 

第一步：下载Echarts

yarn add echarts

or

npm install echarts5@npm:echarts@4.2

这个是我下载指定版本的Echarts

或者进入官网，看他们的下载方式

第二步：在需要的页面组件中引入 

import * as echarts from 'echarts'（这里是将整个Echarts导入，你也可以按需导入）

第三步：定义一个存放图表的div元素，以及方法，并初始化图表，并在mounted生命周期函数中调用此方法

<div id="Curve"></div>

initCurveFn () {
      // 初始化
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('Curve'))
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }
        ]
      })
    }

 

mounted () {
    this.initCurveFn()
  },