ECharts 是一个非常强大的 JavaScript 图表库，支持多种类型的图表，可以用来展示各种数据。以下是一些常用的 ECharts 图表
- 折线图 (Line Chart)——适用于展示随时间变化的趋势数据
- 柱状图 (Bar Chart)——适用于比较不同类别的数值大小
- 饼图 (Pie Chart)——适用于展示各个部分占总体的比例
- 散点图 (Scatter Chart)——适用于观察变量间的相关性
- 常见的还有地图 (Map Chart)、雷达图 (Radar Chart) 和树图 (Tree Chart) 等等
NPM 安装 ECharts
npm install echarts --save
引入 ECharts
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
常用配置项
以下8个为常用配置项，还有很多配置项，具体细节可以查阅文档，ECharts官网讲的很清晰，可以锻炼查文档的能力，从而在学习工作中，从容根据需求修改配置。
title
标题组件，包含主标题和副标题
title: {
text: '主标题', /主标题文本/
subtext:'副标题', /副标题文本/
left: 'center', /位置参数，'left', 'center', 'right'，也可填数值或百分比/
top: 'top', /位置参数，'top', 'center', 'bottom'，也可填数值或百分比/
...
}
legend
图例组件，展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
orient: 'vertical',/布局朝向,可选：'horizontal' 'vertical'/
left: 'left', /位置参数，'left', 'center', 'right'，也可填数值或百分比/
top: 'top', /位置参数，'top', 'center', 'bottom'，也可填数值或百分比/
...
},
tooltip
提示框组件
tooltip: {
trigger: 'axis', /可选：'axis' 坐标轴触发，'item'数据项图形触发，'none'什么都不触发/
...
}
toolbox
工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
toolbox: {
feature: {
magicType: {show: true, type: ['line', 'bar', 'stack']}, /图表类型切换/
dataView: {show: true, readOnly: false}, /数据视图工具，是否只读/
restore: {show: true}, /配置项还原/
saveAsImage: {show: true}, /保存为图片/
...
}
}
grid
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
grid:{
left:'5%', /网格左侧的距离/
right:'5%', /网格右侧的距离/
bottom:'5%', /网格底部的距离/
containLabel: true, /grid 区域是否包含坐标轴的刻度标签/
...
},
xAxis
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
xAxis: {
type: 'category', /类型：'category' 类目轴，'value' 数值轴 'time'时间轴/
position: 'bottom', /x轴的位置 'top' 'bottom'/
name: '我是x轴', /坐标轴名称/
nameLocation: 'start', /坐标轴名称显示位置/
axisTick:{ /刻度线配置/
alignWithLabel: true, /刻度线和标签是否对齐/
},
data: ['周一', '周二', '周三', '周四', '周五'], /类目数据/
...
},
YAxis
直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
yAxis: {
type: 'value',
position: 'left', /y轴位置 'left' 'right'/
/其他配置同xAxis类似/
},
series
图表的核心部分，用于定义图表中显示的具体数据和样式。每一个series对象代表图表中的一条数据线、一个柱状图等。
series: [
{
data: [150, 230, 224, 218, 135], /系列中的数据值/
name: 'data1',/系列名称，用于tooltip的显示，legend的图例筛选变化/
type: 'line', /类型：'bar' 柱状图，'line' 线图，'pie' 饼图等/
stack: 'all', /如果设置相同值，则会数据堆叠/
...
},
{
data: [100, 222, 244, 254, 238],
name: 'data2',
type: 'line',
stack: 'all',
...
},
...
]
formatter配置项
formatter 是一个非常重要的配置项，它用于格式化和自定义图表中显示的文本内容，比如提示框（tooltip）、轴标签（axis label）、图例（legend）、数据标签（data label）等组件中的文本。通过 formatter，可以使数据显示更加丰富、灵活并符合特定需求。
基本用法
- 字符串模板——用于简单的显示需求，允许使用一些占位符来动态替换数据。
tooltip: {
formatter: '{a} <br/>{b}: {c} ({d}%)' ,
/ {a} 代表系列名称/
/ {b} 代表数据项名称/
/ {c} 代表数值/
/ {d} 代表百分比/
}
- 回调函数——提供更强大的定制能力，可以访问更多数据和上下文信息，进行复杂的逻辑处理。
tooltip: {
formatter: function (params) {
// params 是一个对象，包含了当前数据点的信息
return params.name + ': ' + params.value;
},
/ params 对象通常包含以下属性：/
- `name`: 数据项名称
- `value`: 数据项的值
- `seriesName`: 系列名称
- `componentType`: 组件类型
- `dataType`: 数据类型
- `axisValue`: 轴上的值
- `marker`: 标记符号
- `color`: 颜色
- `dataIndex`: 数据索引
- `data`: 原始数据项
}
使用场景
- Tooltip 格式化：定制 tooltip 显示的文本格式，包括数据值、百分比、单位等。
- Axis Label 自定义：调整轴标签的显示方式，比如日期格式化、数值千分位分隔等。
- Legend 文本优化：改变图例中系列名称的显示，增加额外信息或简化文本。
- Data Label 内容控制：直接在图表的数据点上显示定制化的文本标签。
以上内容只是ECharts的部分配置项的部分配置内容，更丰富和详细的功能及内容建议到文档中查阅。
ECharts配置项手册
