Echarts 是一款功能强大的 JavaScript 库，用于数据可视化。它可以帮助开发者轻松创建各种类型的图表，并且支持丰富的个性化配置。在本篇文章中，我们将通过 10 个实用示例，帮助你快速上手 Echarts 的个性化图表配置，打造专属的可视化效果。
示例 1：基础柱状图
柱状图是 Echarts 中最常用的图表之一。以下是一个简单的柱状图示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘基础柱状图’
},
tooltip: {},
xAxis: {
data: [“衬衫”, “羊毛衫”, “雪纺衫”, “裤子”, “高跟鞋”, “袜子”]
},
yAxis: {},
series: [{
name: ‘销量’,
type: ‘bar’,
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
示例 2：堆叠柱状图
堆叠柱状图可以展示多个数据系列之间的关系。以下是一个堆叠柱状图的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘堆叠柱状图’
},
tooltip: {},
xAxis: {
data: [“衬衫”, “羊毛衫”, “雪纺衫”, “裤子”, “高跟鞋”, “袜子”]
},
yAxis: {},
series: [{
name: ‘销量’,
type: ‘bar’,
stack: ‘总量’,
data: [5, 20, 36, 10, 10, 20]
}, {
name: ‘增长率’,
type: ‘bar’,
stack: ‘总量’,
data: [20, 32, 10, 20, 20, 30]
}]
};
myChart.setOption(option);
示例 3：折线图
折线图适用于展示数据随时间的变化趋势。以下是一个折线图的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘折线图’
},
tooltip: {},
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: ‘line’
}]
};
myChart.setOption(option);
示例 4：散点图
散点图适用于展示两个变量之间的关系。以下是一个散点图的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘散点图’
},
tooltip: {},
xAxis: {
type: ‘value’
},
yAxis: {
type: ‘value’
},
series: [{
data: [
[10.0, 8.04],
[8.09, 6.02],
[7.2, 7.24],
[4.82, 5.15],
[5.2, 6.82],
[5.27, 6.72],
[2.02, 4.20],
[3.24, 5.26],
[4.26, 4.62],
[5.62, 5.38]
],
type: ‘scatter’
}]
};
myChart.setOption(option);
示例 5：饼图
饼图适用于展示各部分占总体的比例。以下是一个饼图的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘饼图’
},
tooltip: {
trigger: ‘item’
},
legend: {
orient: ‘vertical’,
left: ‘left’,
data: [‘衬衫’, ‘羊毛衫’, ‘雪纺衫’, ‘裤子’, ‘高跟鞋’, ‘袜子’]
},
series: [{
name: ‘访问来源’,
type: ‘pie’,
radius: ‘50%’,
data: [
{value: 1048, name: ‘搜索引擎’},
{value: 735, name: ‘直接访问’},
{value: 580, name: ‘邮件营销’},
{value: 484, name: ‘联盟广告’},
{value: 300, name: ‘视频广告’}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}]
};
myChart.setOption(option);
示例 6：雷达图
雷达图适用于展示多个变量之间的关系。以下是一个雷达图的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘雷达图’
},
tooltip: {},
legend: {
orient: ‘vertical’,
left: ‘left’,
data: [‘预算分配（分配率）’]
},
radar: {
name: {
textStyle: {
color: ‘#000’
}
},
indicator: [
{name: ‘销售（销售额）’, max: 6500},
{name: ‘管理（管理费用）’, max: 16000},
{name: ‘信息技术（信息技术预算）’, max: 30000},
{name: ‘客服（客服人数）’, max: 38000},
{name: ‘研发（研发投入）’, max: 52000},
{name: ‘市场（市场营销费用）’, max: 25000}
]
},
series: [{
name: ‘预算分配（分配率）’,
type: ‘radar’,
data: [
{
value: [6500, 16000, 30000, 38000, 52000, 25000],
name: ‘预算分配（分配率）’
}
]
}]
};
myChart.setOption(option);
示例 7：K线图
K线图适用于展示股票、期货等金融市场的价格波动。以下是一个K线图的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘K线图’
},
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘cross’
}
},
xAxis: {
type: ‘category’,
data: [‘2015-01-01’, ‘2015-01-02’, ‘2015-01-03’, ‘2015-01-04’, ‘2015-01-05’, ‘2015-01-06’, ‘2015-01-07’]
},
yAxis: {
type: ‘value’
},
series: [{
name: ‘上证指数’,
type: ‘candlestick’,
data: [
[0, 2000, 2500, 2400, 2300],
[0, 2100, 2600, 2500, 2400],
[0, 2300, 2700, 2600, 2500],
[0, 2400, 2800, 2700, 2600],
[0, 2500, 2900, 2800, 2700],
[0, 2600, 3000, 2900, 2800],
[0, 2700, 3100, 3000, 2900]
]
}]
};
myChart.setOption(option);
示例 8：地图图
地图图适用于展示地理空间数据。以下是一个地图图的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘地图图’
},
tooltip: {
trigger: ‘item’,
formatter: ‘{a}
{b}: {c} ({d}%)’
},
legend: {
orient: ‘vertical’,
left: ‘left’,
data: [‘华北’, ‘华东’, ‘华南’, ‘华中’, ‘东北’, ‘西南’, ‘西北’]
},
series: [{
name: ‘访问来源’,
type: ‘pie’,
radius: ‘55%’,
center: [‘50%’, ‘60%’],
data: [
{value: 335, name: ‘华北’},
{value: 310, name: ‘华东’},
{value: 234, name: ‘华南’},
{value: 135, name: ‘华中’},
{value: 1548, name: ‘东北’},
{value: 1548, name: ‘西南’},
{value: 1548, name: ‘西北’}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}]
};
myChart.setOption(option);
示例 9：热力图
热力图适用于展示数据在空间上的分布情况。以下是一个热力图的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘热力图’
},
tooltip: {
trigger: ‘item’
},
xAxis: {
type: ‘category’,
data: [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’]
},
yAxis: {
type: ‘category’,
data: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’]
},
visualMap: {
min: 0,
max: 100,
left: ‘left’,
top: ‘bottom’,
text: [‘高’, ‘低’], // 文本，默认为数值文本
calculable: true
},
series: [{
type: ‘heatmap’,
data: [
[0, 0, 100],
[0, 1, 90],
[0, 2, 80],
[0, 3, 70],
[0, 4, 60],
[0, 5, 50],
[0, 6, 40],
[1, 0, 100],
[1, 1, 90],
[1, 2, 80],
[1, 3, 70],
[1, 4, 60],
[1, 5, 50],
[1, 6, 40],
[2, 0, 100],
[2, 1, 90],
[2, 2, 80],
[2, 3, 70],
[2, 4, 60],
[2, 5, 50],
[2, 6, 40],
[3, 0, 100],
[3, 1, 90],
[3, 2, 80],
[3, 3, 70],
[3, 4, 60],
[3, 5, 50],
[3, 6, 40],
[4, 0, 100],
[4, 1, 90],
[4, 2, 80],
[4, 3, 70],
[4, 4, 60],
[4, 5, 50],
[4, 6, 40],
[5, 0, 100],
[5, 1, 90],
[5, 2, 80],
[5, 3, 70],
[5, 4, 60],
[5, 5, 50],
[5, 6, 40],
[6, 0, 100],
[6, 1, 90],
[6, 2, 80],
[6, 3, 70],
[6, 4, 60],
[6, 5, 50],
[6, 6, 40]
]
}]
};
myChart.setOption(option);
示例 10：组合图表
组合图表可以将多种图表类型结合在一起，以展示更丰富的信息。以下是一个组合图表的示例：
var myChart = echarts.init(document.getElementById(‘main’));
var option = {
title: {
text: ‘组合图表’
},
tooltip: {
trigger: ‘axis’
},
legend: {
data: [‘销量’, ‘增长率’]
},
xAxis: {
type: ‘category’,
data: [‘衬衫’, ‘羊毛衫’, ‘雪纺衫’, ‘裤子’, ‘高跟鞋’, ‘袜子’]
},
yAxis: [
{
type: ‘value’,
name: ‘销量’,
position: ‘left’
},
{
type: ‘value’,
name: ‘增长率’,
position: ‘right’
}
],
series: [
{
name: ‘销量’,
type: ‘bar’,
data: [5, 20, 36, 10, 10, 20],
yAxisIndex: 0
},
{
name: ‘增长率’,
type: ‘line’,
yAxisIndex: 1,
data: [20, 32, 10, 20, 20, 30]
}
]
};
myChart.setOption(option);
通过以上 10 个实用示例，相信你已经对 Echarts 的个性化图表配置有了初步的了解。在实际应用中，你可以根据需求调整图表类型、配置参数和样式，以打造出更具吸引力的可视化效果。祝你学习愉快！