Echarts数据集设置动态排序横向柱状图
时间: 2023-07-31 11:13:28 浏览: 97
要将数据集设置到动态排序横向柱状图上,需要进行以下步骤:
1. 创建一个基本的横向柱状图,设置好其基本属性,如x轴、y轴等。
2. 将数据集转换成数组形式,方便后续的处理。例如,将{key1:value1, key2:value2, key3:value3}转换成[{name:key1, value:value1}, {name:key2, value:value2}, {name:key3, value:value3}]。
3. 对数组进行排序,以便在图表中按照一定规则显示。可使用JavaScript的sort()方法,或者Lodash库中的orderBy()方法等进行排序。
4. 将排序后的数据集赋值给横向柱状图的series属性,其中name属性为数组中的key值,value属性为数组中的value值。
5. 可根据需要设置横向柱状图的其他属性,如柱子的颜色、宽度、标签等。
下面是一个示例代码:
```javascript
// 基本横向柱状图配置
var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['key1', 'key2', 'key3']
},
series: [{
type: 'bar',
data: []
}]
};
// 数据集
var data = { key1: 10, key2: 20, key3: 30 };
// 转换成数组形式并排序
var dataArray = [];
for (var key in data) {
dataArray.push({ name: key, value: data[key] });
}
dataArray.sort(function(a, b) {
return a.value - b.value;
});
// 将数据集赋值给横向柱状图
option.series[0].data = dataArray;
// 渲染横向柱状图
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
```