ECharts入门教程（基础详细）
ECharts入门教程（基础详细）
ECharts是一个使用JavaScript实现的开源可视化库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器。它提供了丰富的图表类型，包括折线图、柱状图、散点图、饼图等，并支持高度个性化定制。本文将从基础概念到具体实现，再到高级功能和注意事项，帮助读者快速掌握ECharts的使用方法。
一、关于ECharts
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
官网地址：Apache ECharts
二、ECharts的使用
1，安装 ECharts
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save
或者 yarn add echarts
2，引入ECharts
import * as echarts from 'echarts';
3，创建DOM容器
在Vue组件的模板部分，创建一个用于放置ECharts图表的DOM容器。例如：
<template>
<div ref="chart" style="width: 600px; height: 400px;"></div>
</template>
4，初始化ECharts实例
在Vue组件的
mounted
生命周期钩子中，初始化ECharts实例。例如：
<script>
import { onMounted, shallowRef} from 'vue';
import * as echarts from 'echarts';
export default {
setup() {
const chart = shallowRef(null);
let myChart = null;
onMounted(() => {
myChart = echarts.init(chart.value);
// 配置图表
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用配置项和数据显示图表
myChart.setOption(option);
});
return { chart , myChart };
}
};
</script>
请注意，在vue3中，这里的const chart = shallowRef(null); let myChart = null;请尽量避免使用ref和reactive，否则，会 导致ECharts 图表部分功能异常。
三、ECharts的重点配置介绍
可前往官网查看更加详细的配置介绍：Documentation - Apache ECharts
1，标题配置title
title: {
text: '图表标题',
subtext: '副标题',
left: 'center',//标题位置
//主标题文本超链接
link:'https://echarts.apache.org/zh/option.html#title',
//指定窗口打开主标题超链接
//'self' 当前窗口打开,'blank' 新窗口打开
target:'blank',
width:'20px',
height:'20px'
}
2，工具提示配置tooltip
tooltip: {
trigger: "item",
},
show：是否显示提示框组件。
trigger：触发类型。可选：
'item'
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
'axis'
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
'none'
什么都不触发。
3，坐标轴配置xAxis和yAxis
xAxis: {
type: "category",
data: [0, 1, 2, 3, 4, 5, 6],
},
yAxis: {
type: "value",
min: 0,
max: 6,
},
xAxis配置：
- type：坐标轴类型，可以是
'category'
（类目轴，适用于离散的类目数据）、
'value'
（数值轴，适用于连续数值数据）、
'time'
（时间轴，适用于时间数据）或
'log'
（对数轴）。 - position：坐标轴的位置，可以是
'top'
或
'bottom'
。 - data：类目数据，仅在类目轴（
type: 'category'
）中有效。如果设置了
type
是
'category'
，但没有设置
axis.data
，则
axis.data
的内容会自动从
series.data
中获取。 - min、
max**：坐标轴刻度的最小值和最大值。
yAxis配置：
yAxis
的配置与
xAxis
类似，也包含基础配置项、坐标轴类型、坐标轴名称、刻度与标签、分隔线与分隔区域等部分。不过，
yAxis
的位置属性是
'left'
或
'right'
，以控制其在图表中的左右位置。
4，数据系列配置series
series: [
{
name:'aa',
data: [90, 20, 10, 8, 40, 77, 10],
type: 'bar'
},
{
name:'bb',
data: [20, 9, 50, 60, 90, 11, 30],
type: 'bar'
},
{
name:'cc',
data: [100, 70, 70, 88, 7, 10, 13],
type: 'bar'
},
]
name：系列名称，用于tooltip的显示，legend 的图例筛选。
type：图表类型，折线图line，柱状图bar，饼图pie，散点（气泡）图scatter
5，图例组件legend
当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平）
legend: {
orient: "vertical",
type: "scroll",
top: "10%",
right: 0,
height: "400px",
//图例长度大于15则后面字符省略为...
formatter: function (name: string) {
var maxLength = 15;
if (name.length > maxLength) {
return name.substring(0, maxLength) + "...";
} else {
return name;
}
},
},
type：图例的类型。可选值：
'plain'
：普通图例。缺省就是普通图例。
'scroll'
：可滚动翻页的图例。当图例数量较多时可以使用。
orient：图例列表的布局朝向。可选：
'horizontal'
'vertical'
padding：图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
formatter：用来格式化图例文本，支持字符串模板和回调函数两种形式。
6，直角坐标系内绘图网格grid(可控制图表的位置)
grid: {
left: "5%",
right: "15%",
bottom: '10%',
containLabel: true,
},
left ：grid 组件离容器左侧的距离。
left
的值可以是像
20
这样的具体像素值，可以是像
'20%'
这样相对于容器高宽的百分比，也可以是
'left'
,
'center'
,
'right'
。
如果
left
的值为
'left'
,
'center'
,
'right'
，组件会根据相应的位置自动对齐。
width：grid 组件的宽度。默认自适应。
height：grid 组件的高度。默认自适应。
containLabel：
用于控制网格（
grid
）是否包含坐标轴的标签。当设置为
true
时，网格会自动调整其尺寸以确保坐标轴的标签能够完全显示，而不会溢出容器或覆盖其他组件。这特别适用于标签长度可能动态变化的场景，如标签文本内容较长或使用了不同的字体大小。
6，区域缩放
dataZoom
支持这几种类型的
dataZoom
组件：
内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在
toolbox
中。
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex:0,
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex:0,
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: 0,
start: 1,
end: 35
},
{
type: 'inside',
yAxisIndex:0,
start: 29,
end: 36
}
],
dataZoom
的数据窗口范围的设置，目前支持两种形式：
百分比形式：即设置 dataZoom.start 和 dataZoom.end。
绝对数值形式：即设置 dataZoom.startValue 和 dataZoom.endValue。
type：类型，inside内置型，slider滑动条型。
inside内置型配置：
disabled：是否停止组件的功能。
xAxisIndex：设置
dataZoom-inside
组件控制的
x轴。如果
xAxis只有一个对象，填0即可。yAxisIndex：设置
dataZoom-inside
组件控制的
y轴。如果
yAxis只有一个对象，填0即可。
slider内置型配置：
show：是否显示组件。如果设置为
false
，不会显示，但是数据过滤的功能还存在。
其他类似。
7，工具栏toolbox
toolbox: {
right: 20,
show: true,
feature: {
saveAsImage: {},
dataZoom: {
show: true,
filterMode: "none",
},
restore: {},
dataView: { readOnly: true },
magicType: { type: ['line', 'bar'] },
//自定义工具
myTool2: {
show: true,
title: '自定义扩展方法',
icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
onclick: function (){
alert('myToolHandler2')
}
}
},
},
内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
show：是否显示组件。
orient：工具栏 icon 的布局朝向。可选：
- 'horizontal' 水平，默认
- 'vertical' 垂直
itemSize：工具栏 icon 的大小。
feature：各工具配置项。除了各个内置的工具按钮外，还可以自定义工具按钮。
saveAsImage：保存为图片。
restore：配置项还原。
dataView：数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
dataZoom：数据区域缩放。目前只支持直角坐标系的缩放。
magicType：动态类型切换。如设置：type: ['line', 'bar', 'stack']
注意：自定义的工具名字，只能以
my
开头。如上示例
四、其他注意事项
1，响应式处理
在实际项目中，图表需要根据窗口大小的变化进行自适应调整。可以通过监听窗口的resize事件，在窗口大小变化时调用ECharts实例的resize方法。
onMounted(() => {
const myChart = echarts.init(chart.value);
// 配置图表...
window.addEventListener('resize', () => {
myChart.resize();
});
});
2，动态更新数据
在实际应用中，可能需要根据用户操作或数据变化动态更新图表。可以通过调用ECharts实例的setOption方法，传入新的数据和配置项来更新图表。
const updateChartData = (newData)=> {
//更新配置数据
myChart.setOption({
series: [{
data: newData
}]
});
}
3，全局挂载ECharts
在main.js中引入ECharts，并将其挂载到Vue的全局属性上。
import { createApp } from 'vue';
import App from './App.vue';
import * as echarts from 'echarts';
const app = createApp(App);
app.config.globalProperties.$echarts = echarts;
app.mount('#app');
4，使用vue-echarts插件
安装并使用vue-echarts插件，该插件提供了Vue组件封装，使得在Vue中使用ECharts更加方便。
npm install vue-echarts --save
在main.js中引入并使用vue-echarts组件。
import { createApp } from 'vue';
import App from './App.vue';
import Echarts from 'vue-echarts';
const app = createApp(App);
app.component('e-charts', Echarts);
app.mount('#app');
然后，在组件中使用e-charts组件，并通过option属性传递图表配置项。
<template>
<e-charts :option="chartOption" style="width: 600px; height: 400px;"></e-charts>
</template>
<script>
export default {
data() {
return {
chartOption: {
// 图表配置项
}
};
}
};
</script>