安装 echarts5.x
npm install echarts --save
main.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]
)
Vue.prototype.$echarts = echarts
使用
<div ref="bar" :style="{ width: '500px', height: '500px' }"></div>
drawLine() {
this.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],
},
],
};
this.myEcharts.setOption(option);
},
mounted() {
//调用
this.drawLine();
//做到每个图表根据屏幕变化而自适应宽高
window.addEventListener("resize", () => {
this.myEcharts.resize();
});
},