在数据可视化领域,ECharts 是一款功能强大、易于使用的图表库。今天,我要教大家如何利用 ECharts 实现柱状图堆叠与圆环图的结合,让数据展示更加生动有趣。
准备工作
在开始之前,请确保你已经安装了 ECharts。可以通过以下命令进行安装:
npm install echarts --save
或者,如果你使用的是其他构建工具,可以按照相应的指南进行安装。
柱状图堆叠
首先,我们来创建一个简单的柱状图堆叠示例。
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [
{
name: '邮件营销',
type: 'bar',
stack: '总量',
data: [120, 200, 150, 80, 70, 110, 130]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
data: [60, 90, 60, 120, 80, 100, 120]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
data: [90, 100, 80, 70, 110, 130, 120]
},
{
name: '直接访问',
type: 'bar',
stack: '总量',
data: [50, 80, 60, 70, 110, 130, 120]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
data: [70, 110, 130, 90, 100, 120, 80]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
这段代码将创建一个柱状图堆叠的图表,展示了不同类别的数据在时间序列上的堆叠情况。
圆环图结合
接下来,我们将柱状图堆叠与圆环图结合。首先,我们需要修改一下数据,使其适合圆环图。
// 修改数据
var seriesData = [
{
name: '邮件营销',
value: 300
},
{
name: '联盟广告',
value: 300
},
{
name: '视频广告',
value: 300
},
{
name: '直接访问',
value: 300
},
{
name: '搜索引擎',
value: 300
}
];
// 添加圆环图
option.series.push({
name: '总量',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: seriesData
});
// 渲染图表
myChart.setOption(option);
这段代码将添加一个圆环图,展示每个类别的总量。圆环图与柱状图堆叠结合,使得数据展示更加直观。
总结
通过以上步骤,我们成功地将柱状图堆叠与圆环图结合,实现了更加丰富的数据可视化效果。ECharts 的强大功能让我们可以轻松地实现各种复杂的数据展示。希望这篇文章能帮助你更好地理解和应用 ECharts。
