echarts设置柱状图数值
时间: 2023-10-05 21:04:32 浏览: 238
Echarts实现柱状图效果
4星 · 用户满意度95%
要在 Echarts 中设置柱状图的数值,可以使用 series.data 属性来指定每个柱子的数据。例如,在以下代码片段中,我们创建了一个简单的柱状图,其中每个柱子都具有一个相应的值:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Apple', 'Banana', 'Orange', 'Grape', 'Watermelon']
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 20, 30, 40, 50],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在这个示例中,我们指定了 xAxis 和 yAxis 的类型,以及每个柱子的数据。我们将数据指定为一个数组,其中每个元素代表一个柱子的值。在这个例子中,我们提供了五个值,分别对应于五个柱子。如果您需要更多的柱子,只需向数据数组中添加更多的数字即可。
注意,如果您要动态更新柱状图的数据,可以通过调用 setOption() 方法来实现。例如,您可以在某个事件发生时更新数据,然后重新设置图表选项即可。
阅读全文