标签：option -- data 柱状图 var 动态 true Math
案例1
<!--
此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-race
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="width: 400px;height: 350px"></div>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
const data = [30,9,28,16,61];
// 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: 4 // 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'
};
const data1 = [3,9,8,6,1
,6,9,5,8,7
,9,8,2,8,6
,8,5,8,9,7
,6,2,5,8,7];
var d = 0;
var s = 25
function run() {
for (var i = 0; i < data.length; ++i) {
if(d<25){
data[i] += data1[d];
console.log(i + "----" + d + "---" + data1[d])
}else{
data[i] += 0;
console.log("data[" + d + "]为null，请刷新");
}
d++;
// if (Math.random() > 0.9) {
// data[i] += Math.round(Math.random() * 2000);
// } else {
// data[i] += Math.round(Math.random() * 200);
// }
}
myChart.setOption({
series: [
{
type: 'bar',
data
}
]
});
}
setTimeout(function () {
run();
}, 0);
setInterval(function () {
run();
}, 3000);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
- 效果图
标签：option,
--,
data,
柱状图,
var,
动态,
true,
Math
From： https://www.cnblogs.com/dogleftover/p/18012534