echarts在vue中按需引入

1.安装

npm install echarts --save

2.myEhcarts.js

创建myEhcarts.js文件，当然，文件名称和位置可以自己定，内容如下：

// myEhcarts.js
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';

// 引入图表类型，图表后缀都为 Chart
import {
    BarChart,
    LineChart,
    PieChart,
    ScatterChart
} from 'echarts/charts';

// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    SVGRenderer
} from 'echarts/renderers';

// 将以上引入的组件使用use()方法注册
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, LineChart, PieChart, ScatterChart, SVGRenderer]
);

// 导出
export default echarts;

3.main.js

在main.js中注册，并挂载到全局

// main.js
import echarts from "@/utils/myEhcarts"
Vue.prototype.$echarts = echarts

4.使用

在组件中就可以使用

initEchart(){
	// 获取容器
	const chartBox = document.getElementById("echart");
	// 实例化图表
	const myChart = this.$echarts.init(chartBox );
	const option = {
		// 配置
	}
	option && myChart.setOption(option);
}