ECharts 是百度开源的一个数据可视化库，它提供了丰富的图表类型和灵活的配置选项，使得开发者能够轻松地创建出各种复杂的数据可视化效果。掌握 ECharts 的图表制作技巧对于数据分析师、前端开发工程师等专业人士来说至关重要。下面我将介绍一些常用的 ECharts 图表类型以及如何利用这些图表来展示数据。
1. 柱状图（Bar Chart）
柱状图是一种非常基础且常见的图表类型，用于显示不同类别的数据对比。在 ECharts 中，可以通过 `bar` 函数来创建柱状图。
示例代码：
```javascript
option = {
bar: {
data: [
{name: '销量', type: 'bar', color: '#0078d7'},
{name: '销售额', type: 'bar', color: '#4682b4'}
]
},
grid: {
// ...
},
xAxis: {
// ...
},
yAxis: {
// ...
},
series: [
{name: '销量', type: 'bar', data: [5, 10, 15, 20, 25]},
{name: '销售额', type: 'bar', data: [100, 200, 300, 400, 500]}
]
};
```
在这个例子中，我们定义了两个系列，分别对应销量和销售额的数据。每个系列都有相应的 x 轴和 y 轴配置，并且使用 `type` 属性指定了图表的类型为柱状图。
2. 折线图（Line Chart）
折线图用于显示数据随时间的变化趋势，非常适合展示连续数据。
示例代码：
```javascript
option = {
series: [
{
type: 'line',
data: [820, 932, 901, 934, 902]
}
],
grid: {
// ...
},
xAxis: {
// ...
},
yAxis: {
// ...
},
series: [
{name: '销量', type: 'line', smooth: true},
{name: '销售额', type: 'line'}
]
};
```
在这个例子中，我们定义了一个包含两个系列的折线图。第一个系列是销量，第二个系列是销售额。通过设置 `smooth` 属性为 `true`，我们可以使折线图呈现出平滑的趋势。
3. 饼图（Pie Chart）
饼图用于显示各个部分占总体的百分比，非常适合展示分类数据。
示例代码：
```javascript
option = {
series: [
{
type: 'pie',
data: [
{value: 335, name: '销量'},
{value: 280, name: '销售额'}
]
}
],
radius: ['50%', '70%'],
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
};
```
在这个例子中，我们定义了一个包含两个系列的饼图。第一个系列是销量，第二个系列是销售额。通过设置 `radius` 属性，我们可以控制饼图的半径大小。`itemStyle` 属性用于设置饼图中每个扇区的颜色和阴影效果。`emphasis` 属性则用于增强饼图的视觉效果。
4. 散点图（Scatter Chart）
散点图用于显示两个变量之间的关系，非常适合展示数据的分布情况。
示例代码：
```javascript
option = {
series: [
{
type: 'scatter',
data: [
{x: 1, y: 2},
{x: 2, y: 3},
{x: 3, y: 4},
{x: 4, y: 5}
]
}
],
symbolSize: [8, 12],
symbolSizeInterpolator: function (_ref) {
var x = _ref.x;
return x < 1 ? 8 : Math.pow(x / 3, 2); // 当 x<=1 时，symbolSize=8；当 x>=3 时，symbolSize=12；其他情况，symbolSize=8*Math.pow(x/3, 2)；
},
lineStyle: {color: 'rgba(0, 0, 0, 0.3)'},
dataView: {show: true, readOnly: false},
interaction: {
mode: 'nearest', // 近邻算法，即鼠标移至某个点时，会显示该点的坐标信息
intersect: true, // 显示相交的点数，默认为10个点
mouseMode: 'intersect', // 鼠标点击后显示相交的点数，默认为10个点
dragRotatePoints: true, // 拖拽时显示相交的点数，默认为10个点
rotatePoints: true, // 鼠标旋转时显示相交的点数，默认为10个点
rotatePointsStyle: { // 旋转时的点样式，可以自定义颜色、大小等属性
color: 'rgba(0, 0, 0, 0.3)', // 颜色为红色
size: 12, // 大小为12px
shape: 'circle' // 形状为圆形
}
},
tooltip: {
trigger: 'axis', // 触发条件为 x轴或 y轴上的数据变化时触发
axisPointer: { // 指针样式，可以自定义颜色、大小等属性
length: 4, // 长度为4px
width: 15, // 宽度为15px
type: 'shadow' // 类型为阴影效果
},
backgroundColor: 'rgba(0, 0, 0, 0.8)', // 背景颜色为黑色
borderColor: '#ffffff', // 边框颜色为白色
borderWidth: 1, // 边框宽度为1px
textStyle: { // 文本样式，可以自定义字体、颜色、大小等属性
color: '#ffffff', // 字体颜色为白色
fontSize: 14, // 字体大小为14px
fontFamily: '宋体' // 字体名称为宋体
}
},
grid: { // 网格样式，可以自定义颜色、大小等属性
left: '0', // 左边距为0px
top: '0', // 上边距为0px
right: '0', // 右边距为0px
bottom: '0' // 下边距为0px
},
xAxis: [{ // x轴配置项，可以自定义颜色、大小等属性
type: 'category', // 类型为分类轴
data: ['周一', '周二', '周三', '周四', '周五'], // x轴数据为周一到周五的时间序列数据
axisLabel: { // x轴标签配置项，可以自定义文字内容、位置等属性
show: true, // 是否显示标签，默认为true
rotate: 50, // 标签旋转角度，默认为50度
fontSize: 14, // 标签字体大小，默认为14px
fontWeight: 'bold', // 标签字体粗细，默认为粗体
textStyle: { // 标签样式配置项，可以自定义字体、颜色、大小等属性
color: '#333' // 标签颜色为灰色
}
},
boundaryGap: [0, 0], // x轴边界间隙，默认为0px，表示不显示间隙
axisLabel: { // x轴标签配置项，可以自定义文字内容、位置等属性
show: true, // 是否显示标签，默认为true
rotate: 50, // 标签旋转角度，默认为50度
fontSize: 14, // 标签字体大小，默认为14px
fontWeight: 'bold', // 标签字体粗细，默认为粗体
textStyle: { // 标签样式配置项，可以自定义字体、颜色、大小等属性
color: '#333' // 标签颜色为灰色
}
}
],
series: [{ // y轴配置项，可以自定义颜色、大小等属性
type: 'line', // 类型为折线轴，这里以折线为例，实际使用时可以根据需求选择柱状、饼图等类型
data: [820, 932, 901, 934, 902], // y轴数据为对应的数值序列数据
markPoint: { // markPoint配置项，可以自定义标记点样式，如圆点、叉号等
data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}], // markPoint数据为标记点配置项，可以自定义标记点样式，如圆点、叉号等
markLineGap: [0, 50], // markLineGap配置项，可以自定义标记线间隙，如50px，表示不显示间隙
markLineLength: 20, // markLineLength配置项，可以自定义标记线长度，如20px，表示标记线长度为20px
markLineWeight: 2, // markLineWeight配置项，可以自定义标记线粗细，如2px，表示标记线粗细为2px
markLineColor: 'rgba(0, 0, 0, 0.8)' // markLineColor配置项，可以自定义标记线颜色，如红色，表示标记线颜色为红色
},
emphasis: { // emphasis配置项，可以自定义标记点的突出效果，如加粗、变色等
data: [{type: 'average', name: '平均值'}], // emphasis数据为突出效果配置项，可以自定义突出效果，如加粗、变色等
emphasisBorderWidth: 2, // emphasisBorderWidth配置项，可以自定义突出效果的边框宽度，如2px，表示突出效果的边框宽度为2px
emphasisBorderColor: 'rgba(0, 0, 0, 0.3)' // emphasisBorderColor配置项，可以自定义突出效果的边框颜色，如红色，表示突出效果的边框颜色为红色
川公网安备51015602000223号
