echarts双向柱状图
时间: 2023-06-28 11:08:14 浏览: 127
使用echarts实现双向柱状图
5星 · 资源好评率100%
ECharts是一款基于JavaScript的开源可视化库,支持多种图表类型,包括柱状图。双向柱状图也被称为对称柱状图,可以同时展示正数和负数之间的差异。
以下是一个简单的双向柱状图的示例代码:
```javascript
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip: {},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: [
{
type: 'value'
},
{
type: 'value'
}
],
series: [
{
name: '正数',
type: 'bar',
data: [10, 20, 30, 40, 50, 60]
},
{
name: '负数',
type: 'bar',
yAxisIndex: 1,
data: [-10, -20, -30, -40, -50, -60]
}
]
};
myChart.setOption(option);
```
在这个示例中,我们创建了一个双向柱状图,其中x轴表示类别,y轴分别表示正数和负数。我们创建了两个系列,一个用于正数,另一个用于负数,将它们放在同一个图表中,使用不同的y轴来显示。每个系列都有一个数据数组,用于指定每个类别的值。最后,我们使用setOption方法将配置应用于图表。
希望这个简单的示例能够帮助你开始使用ECharts创建双向柱状图。
阅读全文