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);
}