echarts横向立体图
时间: 2023-12-26 12:28:00 浏览: 77
echarts 横着显示的柱状图
以下是使用Echarts绘制横向立体图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts横向立体图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
<div style="width: 500px; height: 400px" id="barChartSix"></div>
<script type="text/javascript">
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('barChartSix'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'Echarts横向立体图'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['产品A', '产品B', '产品C', '产品D', '产品E']
},
series: [
{
name: '销量',
type: 'bar',
data: [200, 300, 450, 600, 800],
itemStyle: {
emphasis: {
color: 'rgba(0,0,0,0.7)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
这段代码会生成一个横向立体图,其中x轴表示销量,y轴表示产品名称。你可以根据自己的需求修改数据和样式。
阅读全文