-
槐序 初学数据Lv2
发表于2023-7-28 10:00
悬赏1
未解决
是官网里的动态排序柱状图https://echarts.apache.org/examples/zh/editor.html?c=bar-race,最后效果没有动
要怎么改能实现动态
13个回答
本帖最后由 chestnut 于 2023-7-28 12:01 编辑
最后的时间写小些呢?
是有取表中的数据?表中的数据能正常显示吗?
echarts官网里的例子代码
const data = [];
for (let i = 0; i < 5; ++i) {
data.push(Math.round(Math.random() * 200));
}
option = {
xAxis: {
max: 'dataMax'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 2 // only the largest 3 bars will be displayed
},
series: [
{
realtimeSort: true,
name: 'X',
type: 'bar',
data: data,
label: {
show: true,
position: 'right',
valueAnimation: true
}
}
],
legend: {
show: true
},
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: 'linear',
animationEasingUpdate: 'linear'
};
function run() {
for (var i = 0; i < data.length; ++i) {
if (Math.random() > 0.9) {
data += Math.round(Math.random() * 2000);
} else {
data += Math.round(Math.random() * 200);
}
}
myChart.setOption({
series: [
{
type: 'bar',
data
}
]
});
}
setTimeout(function () {
run();
}, 0);
setInterval(function () {
run();
}, 3000);
槐序 发表于 2023-7-28 16:10
echarts官网里的例子代码
const data = [];
去掉客户端脚本,直接在自定义组件中粘贴echarts的脚本,看看效果。
再根据实际效果,调整代码中的属性值。
chestnut 发表于 2023-7-28 17:48
去掉客户端脚本,直接在自定义组件中粘贴echarts的脚本,看看效果。
再根据实际效果,调整代码中的属性值 ...
右边是直接粘贴echarts脚本的,x轴下面多了点东西,样式也不一样了
槐序 发表于 2023-8-1 14:42
右边是直接粘贴echarts脚本的,x轴下面多了点东西,样式也不一样了
脚本中一些属性需要修改或者增加,可以参考这个调整看看:
https://blog.csdn.net/qq_41737172/article/details/122358211
chestnut 发表于 2023-8-1 14:52
脚本中一些属性需要修改或者增加,可以参考这个调整看看:
https://blog.csdn.net/qq_41737172/article/d ...
不想在原echarts版本基础上改,是想引入新版本echarts才拿这个测试的,有些图表效果要高版本echarts
槐序 发表于 2023-8-2 13:57
不想在原echarts版本基础上改,是想引入新版本echarts才拿这个测试的,有些图表效果要高版本echarts ...
可以导入新版本后,根据报表实际显示效果调整