option = {
legend: {
show: true,
formatter: function (name) {
const list = {
test_1: '品类A',
test_2: '品类B',
test_3: '品类C',
test_4: '品类D',
music: '音乐'
};
return list[name];
}
},
xAxis: [
{
type: 'category',
data: ['2011', '2012', '2013', '2014', '2015🍌'],
axisTick: {
// 轴刻度
show: false
},
axisLabel: {
// 轴文字
color: '#A0B2D3',
fontSize: 20
},
axisLine: {
// 轴线
show: false
}
}
],
yAxis: [
{
type: 'value',
position: 'left'
},
{
type: 'value',
position: 'right'
}
],
series: [
{
name: 'test_1',
data: [10, 5, 7, 7, 3],
type: 'bar',
yAxisIndex: 0,
stack: 'Mon',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: 'test_4',
data: [2, 4, 6, 10, 6],
type: 'bar',
stack: 'Mon',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: 'test_2',
data: [1, 3, 1, 6, 8],
type: 'bar',
stack: 'Mon',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: 'test_3',
data: [1, 20, 10, 22, 0],
type: 'bar',
stack: 'Mon',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
},
{
name: 'music',
type: 'line',
yAxisIndex: 1,
data: [23, 12, 25, 31, 9],
}
]
};
Echart:实现堆叠柱状图与折线图混合,图例显示类别,x轴显示年份,双坐标轴
最新推荐文章于 2024-08-01 14:05:05 发布
这篇博客展示了如何使用ECharts创建一个包含柱状图和折线图的图表,用以分析不同品类(品类A、品类B、品类C、品类D和音乐)在2011年至2015年的数据变化。图表中,各品类的数据通过堆叠柱状图表示,同时用折线图展现了音乐这一类别的独立趋势。配置项包括轴标签、颜色、背景样式等,使得数据可视化清晰易读。
摘要由CSDN通过智能技术生成