前端入门经验——Vue项目中全局配置Echarts

1、安装echarts项目依赖。

cnpm i echarts --save

2、安装组件。

cnpm i vue-echarts -S

3、在main.js 中引入echarts组件库。

import echarts from 'echarts'
//在echarts5.0中，需要改为：`import * as echarts from "echarts";`引入
import ECharts from 'vue-echarts'
Vue.prototype.$echarts = echarts
//注册组件
Vue.component('v-chart', ECharts)

4、使用。

<v-chart class="echarts" :options="bar" :auto-resize="true"/>

参考文章：Vue中引入Echarts封装组件的两种方式（全局引入和按需引入）

注意：

在新版的echarts5.0版本中，引入vue-charts会出现项目不报错，但是echarts图也不出现的情况，个人在使用中用了以下的版本：
"echarts": "^4.9.0", "vue-echarts": "^5.0.0-beta.0",