vue中使用vue-echarts【全局引入，以及按需引入】

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

<template>
   <v-chart class="resourceUse-chart" autoresize :options="options"/>
</template>
<script>
import VChart from 'vue-echarts'
export default {
  components: {VChart},
 data() {
    return {
      
      options: {},
     
    }
  },
}
</script>