Vue中使用echarts

1、通过命令安装echarts：

npm install v-echarts echarts --save

2、在main.js中引入：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、页面代码：

template中

<div id="myChart" :style="{width: '1300px', height: '280px'}"></div>

script中

// 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }]
    })

//将此段代码封装为方法，在mounted中调用此方法即可

4、如果运行时报错：

This dependency was not found:

* echarts/lib/visual/dataColor in ./node_modules/echarts-liquidfill/src/liquidFill.js

To install it, you can run: npm install --save echarts/lib/visual/dataColor
Error from chokidar (E:\): Error: EBUSY: resource busy or locked, lstat 'E:\DumpStack.log.tmp'

5、解决：

npm i v-charts echarts@4.9.0 -S

至此应该就能运行了！