安装 echarts5.x
npm install echarts --save
按需引入 echarts
图表和组件
先在项目根路径下新建 plugin/echartsUI.js
文件
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入各种图表,图表后缀都为 Chart
import {
BarChart
} from 'echarts/charts';
// 引入提示框,标题,直角坐标系等组件,组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent
// GeoCoComponent
} from 'echarts/components';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer
} from 'echarts/renderers';
// 注册必须的组件
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]
)
export default echarts
修改 main.js
// 按需引入 echarts 5.x
import echarts from './plugins/echartsUI'
Vue.prototype.$echarts = echarts
测试
initEcharts () {
let myEcharts = this.$echarts.init(this.$refs.bar)
let option = {
title: {
text: '按需引入'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {
type: 'value'
},
legend: {},
series: [
{
name: '星期',
type: 'bar',
data: [23, 33, 45, 56, 78]
}
]
}
myEcharts.setOption(option)
}
效果