echarts正负柱状图
时间: 2023-09-09 20:10:14 浏览: 112
ECharts是一个非常流行的数据可视化库,可以用来绘制各种类型的图表,包括正负柱状图。
正负柱状图是一种用于显示正值和负值的柱状图,通常用于比较两个变量之间的差异或变化。在ECharts中,可以使用柱状图和堆叠柱状图来实现正负柱状图。
以下是一个简单的ECharts正负柱状图的示例:
```javascript
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '正负柱状图示例'
},
tooltip: {},
legend: {
data:['收入','支出']
},
xAxis: {
data: ['1月','2月','3月','4月','5月','6月']
},
yAxis: {},
series: [{
name: '收入',
type: 'bar',
data: [2000, 3000, 5000, 8000, 10000, 12000],
itemStyle: {
normal: {
color: '#3CB371'
}
}
},{
name: '支出',
type: 'bar',
data: [-1000, -2000, -3000, -4000, -5000, -6000],
itemStyle: {
normal: {
color: '#FF6347'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在这个示例中,我们创建了一个正负柱状图,其中收入和支出被分别表示为两个柱状图系列。我们使用了ECharts的堆叠柱状图来将正值和负值分别放在柱状图的上部和下部。每个系列的柱状图颜色分别为绿色和红色,以表示正值和负值。
你可以根据自己的需求修改这个示例来满足你的应用场景。
阅读全文