ECharts作为一款功能强大的可视化库,提供了多种图表类型,其中多轴图是展示多维度数据的重要工具之一。下面给大家简单介绍一下多轴图代码!效果如右图~
具体实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts多轴图如何实现多维度数据</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 500px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['电视销量', '冰箱销量', '洗衣机销量']
},
xAxis: [
{
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月']
}
],
yAxis: [
{
type: 'value',
name: '销量'
},
{
type: 'value',
name: '销售额'
}
],
series: [
{
name: '电视销量',
type: 'bar',
data: [120, 200, 150, 80, 70]
},
{
name: '冰箱销量',
type: 'bar',
data: [80, 100, 120, 150, 110]
},
{
name: '洗衣机销量',
type: 'line',
yAxisIndex: 1,
data: [1000, 1500, 2000, 1800, 1600]
}
]
};
chart.setOption(option);
</script>
</body>
</html>

