echarts左右柱状图
时间: 2024-07-02 21:00:53 浏览: 202
ECharts是一个强大的JavaScript数据可视化库,它可以创建各种图表,包括柱状图。左右柱状图,也称为堆积柱状图,通常用于比较两个类别或时间段内的数据变化。在ECharts中,你可以通过设置`series`的数据结构和堆叠属性来创建这种图表。
以下是一个简单的左右柱状图的创建步骤:
1. 首先,你需要在HTML中引入ECharts的库文件。
2. 定义数据,通常是一个二维数组,其中每一项包含`name`(系列名称)、`data`(每个数据点的值)和可能的`stack`(堆叠层名)。
3. 创建配置对象,设置图表类型为`bar`,并指定堆叠为`'left'`或`'right'`(取决于你希望哪一侧的柱子堆积)。
```javascript
var option = {
series: [{
type: 'bar', // 类型为柱状图
stack: '总量', // 堆叠层名
data: [
{ name: 'A', value: [10, 20] },
{ name: 'B', value: [30, 40] },
]
}]
};
```
4. 使用ECharts实例的`setOption`方法设置配置,并初始化图表。
```javascript
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
```
阅读全文
相关推荐


















