step1：安装插件 

 

安装echarts。【没敢用echarts5.0。公司的网访问echarts的官网慢的很。。。】

npm i echarts@4 -S

安装vue-echarts【注意版本号，我用的vue2，vue-echarts的版本高了还得安装@vue/composition-api】

npm i vue-echarts@5.0.0-beta.0 -S

step2：引入

全局引入 

在main.js中引入

// echarts-4.0

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

// 引入echarts-5.0

//import * as echarts from 'echarts'

//Vue.prototype.$echarts = echarts

//引入vue-echarts

import ECharts from 'vue-echarts'

Vue.component('v-chart', ECharts)

然后在vue组件中直接使用就是了 

按需引入

为了省事，在父组件中引入一次echarts【页面布局为，父组件中有三个不同的子组件，子组件中是echarts图】

 在每个子组件中都需要引入vue-echats

 具体代码如下，提供抄录

在vue组件中引入echarts

//echarts5.0的按需引入【import 'echarts' //这个是全局引】

// import * as echarts from 'echarts/core';

// import { BarChart } from 'echarts/charts';

// import { GridComponent ,LegendComponent} from 'echarts/components';

// // 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer

// import { CanvasRenderer } from 'echarts/renderers';

// echarts.use([BarChart, GridComponent, CanvasRenderer,LegendComponent]);

import 'echarts/lib/chart/line'

import 'echarts/lib/chart/bar'

import 'echarts/lib/chart/pie'

import 'echarts/lib/component/polar'

import 'echarts/lib/component/title' // 引入标题组件

import 'echarts/lib/component/legend' // 引入图例组件

import 'echarts/lib/component/tooltip' // 引入图例组件

在vue组件中引入vue-echarts

精彩内容

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：