动态柱状图echarts 柱状配置项内容和展示
配置项如下
//此图用来展示有3个维度的图形报表
var colors = ['#3A85D3', '#ccc', '#008000', '#5470c6', '#61a0a8'];
var KSMC =[
0,
0,
0.2,
1.4,
0.8,
0.2,
0,
0.2,
0.2,
0.2,
0.4,
0.2,
0.2,
0.2,
0,
0.2,
0,
0.2,
0,
0,
0.2,
0.2,
0.8,
0.2,
0.4,
0,
0.2,
0,
0.2,
0.2,
0,
0.2,
0,
0.2,
0.2,
0,
0.2,
0.4,
0.6,
0.3,
0.2,
0.4,
0.2,
0.6,
0.2,
0.2,
0.2,
0.4,
0.6,
1.2,
0.4,
0.8,
0.8,
0.6,
0.2,
0.4,
0.8,
1.2,
3.4,
0.8,
0,
0.2,
0,
0.2,
0,
0,
0,
0.2,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.2,
0,
0.4,
0.4,
0.8,
0.4,
0,
0,
0.2,
0.2,
0.2,
0,
0,
0.2,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.2,
0,
0.2,
0.2,
0.2,
0,
0.4,
0,
0.8,
0.2,
0.2,
0,
0,
0.2,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0.2,
0,
0,
0.2,
0,
0,
0.2,
0,
0,
0,
0,
0,
0.2,
0.2,
0,
0,
0,
0,
0.2,
0,
0.2,
0.4,
0.8,
0.2,
0.2,
0,
0.2,
0,
1.2,
4,
0.6,
5.2,
1.6,
0.4,
1.4,
1.6,
1.4,
1,
0.4,
0.2,
0.2,
0.8
]
var time =[
"2021-10-14T15:59:58",
"2021-10-14T16:59:58",
"2021-10-14T17:59:58",
"2021-10-14T18:59:57",
"2021-10-14T19:59:57",
"2021-10-14T20:59:57",
"2021-10-14T21:59:56",
"2021-10-14T22:59:56",
"2021-10-14T23:59:56",
"2021-10-15T01:00:03",
"2021-10-15T02:00:03",
"2021-10-15T03:00:03",
"2021-10-15T04:00:02",
"2021-10-15T05:00:02",
"2021-10-15T06:00:02",
"2021-10-15T07:00:02",
"2021-10-15T08:00:02",
"2021-10-15T09:00:01",
"2021-10-15T10:00:02",
"2021-10-15T11:00:01",
"2021-10-15T12:00",
"2021-10-15T13:00",
"2021-10-15T14:00",
"2021-10-15T15:00",
"2021-10-15T16:00",
"2021-10-15T16:59:59",
"2021-10-15T17:59:59",
"2021-10-15T18:59:59",
"2021-10-15T19:59:58",
"2021-10-15T20:59:58",
"2021-10-15T21:59:58",
"2021-10-15T22:59:58",
"2021-10-15T23:59:57",
"2021-10-16T01:00:02",
"2021-10-16T02:00:02",
"2021-10-16T03:00:01",
"2021-10-16T04:00:01",
"2021-10-16T05:00:01",
"2021-10-16T06:00:01",
"2021-10-16T07:00",
"2021-10-16T08:00:01",
"2021-10-16T09:00",
"2021-10-16T10:00",
"2021-10-16T10:59:59",
"2021-10-16T11:59:59",
"2021-10-16T12:59:59",
"2021-10-16T14:00",
"2021-10-16T14:59:59",
"2021-10-16T15:59:59",
"2021-10-16T16:59:58",
"2021-10-16T18:00:42",
"2021-10-16T19:00:21",
"2021-10-16T19:59:58",
"2021-10-16T20:59:57",
"2021-10-16T21:59:57",
"2021-10-16T22:59:56",
"2021-10-16T23:59:56",
"2021-10-17T01:00:03",
"2021-10-17T02:00:03",
"2021-10-17T03:00:02",
"2021-10-17T04:00:02",
"2021-10-17T05:00:02",
"2021-10-17T06:00:02",
"2021-10-17T07:00:01",
"2021-10-17T08:00:01",
"2021-10-17T09:00:02",
"2021-10-17T10:00:02",
"2021-10-17T11:00:02",
"2021-10-17T12:00:02",
"2021-10-17T13:00:02",
"2021-10-17T14:00:03",
"2021-10-17T15:00:02",
"2021-10-17T16:00:02",
"2021-10-17T17:00:08",
"2021-10-17T18:00:03",
"2021-10-17T19:00:02",
"2021-10-17T20:00:02",
"2021-10-17T21:00:01",
"2021-10-17T22:00:26",
"2021-10-17T23:00:01",
"2021-10-18T00:00:01",
"2021-10-18T01:00:03",
"2021-10-18T02:00:30",
"2021-10-18T03:00:03",
"2021-10-18T04:00:20",
"2021-10-18T05:00:03",
"2021-10-18T06:00:02",
"2021-10-18T07:00:02",
"2021-10-18T08:00:02",
"2021-10-18T09:00:01",
"2021-10-18T10:00:01",
"2021-10-18T11:00:01",
"2021-10-18T12:00:01",
"2021-10-18T13:00",
"2021-10-18T14:00",
"2021-10-18T15:00",
"2021-10-18T16:00",
"2021-10-18T16:59:59",
"2021-10-18T17:59:59",
"2021-10-18T18:59:59",
"2021-10-18T19:59:58",
"2021-10-18T20:59:58",
"2021-10-18T21:59:58",
"2021-10-18T22:59:58",
"2021-10-18T23:59:57",
"2021-10-19T01:00:03",
"2021-10-19T02:00:02",
"2021-10-19T03:00:02",
"2021-10-19T04:00:02",
"2021-10-19T05:00:02",
"2021-10-19T06:00:01",
"2021-10-19T07:00:01",
"2021-10-19T08:00:01",
"2021-10-19T09:00:01",
"2021-10-19T10:00",
"2021-10-19T11:00",
"2021-10-19T11:59:59",
"2021-10-19T12:59:59",
"2021-10-19T13:59:59",
"2021-10-19T14:59:59",
"2021-10-19T15:59:58",
"2021-10-19T16:59:59",
"2021-10-19T17:59:58",
"2021-10-19T18:59:58",
"2021-10-19T19:59:57",
"2021-10-19T20:59:58",
"2021-10-19T22:00:03",
"2021-10-19T23:00:03",
"2021-10-20T00:00:03",
"2021-10-20T01:00:07",
"2021-10-20T02:00:07",
"2021-10-20T03:00:06",
"2021-10-20T04:00:06",
"2021-10-20T05:00:06",
"2021-10-20T06:00:06",
"2021-10-20T07:00:05",
"2021-10-20T08:00:05",
"2021-10-20T09:00:05",
"2021-10-20T10:00:05",
"2021-10-20T11:00:05",
"2021-10-20T12:00:04",
"2021-10-20T13:00:04",
"2021-10-20T14:00:04",
"2021-10-20T15:00:03",
"2021-10-20T16:00:03",
"2021-10-20T17:00:03",
"2021-10-20T18:00:03",
"2021-10-20T19:00:02",
"2021-10-20T20:00:02",
"2021-10-20T21:00:02",
"2021-10-20T22:00:01",
"2021-10-20T23:00:01",
"2021-10-21T00:00:01",
"2021-10-21T01:00:03",
"2021-10-21T02:00:03",
"2021-10-21T03:00:03",
"2021-10-21T04:00:03",
"2021-10-21T05:00:02",
"2021-10-21T06:00:02",
"2021-10-21T07:00:02",
"2021-10-21T08:00:02",
"2021-10-21T09:00:01",
"2021-10-21T10:00:01",
"2021-10-21T11:00:01",
"2021-10-21T12:00:01",
"2021-10-21T13:00",
"2021-10-21T13:53:57",
"2021-10-21T13:58:56",
"2021-10-21T14:00",
"2021-10-21T14:03:56",
"2021-10-21T14:08:56",
"2021-10-21T14:13:56",
"2021-10-21T14:18:56",
"2021-10-21T14:23:56",
"2021-10-21T14:28:56",
"2021-10-21T14:33:56",
"2021-10-21T15:00"
]
option = {
color: colors,
tooltip: {
trigger: 'axis',
position: function (pt) {
return ['85%', '80%'];
}
},
grid: {
top:'70%',
left: '8%', //柱状图距离左边的距离，也可以用像素px
right: '18%', //柱状图距离右边的距离，也可以用像素px
bottom: '10%', //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
containLabel: false //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
top:'65%',
data: [ '降水量','当日雨量累计值']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// data: ['2021-10-13T10:01:59','2021-10-13T10:10:59','2021-10-13T10:20:59','2021-10-13T30:20:59','2021-10-13T30:40:59','2021-10-13T09:59:59', '2021-10-13T10:01:59', '2021-10-13T10:59:59', '2021-10-13T11:01:59','2021-10-13T11:59:59', '2021-10-13T12:01:59', '2021-10-13T12:59:59', '2021-10-13T13:01:59', '2021-10-13T13:59:59', '2021-10-13T14:01:59','2021-10-13T14:59:59', '2021-10-13T15:01:59', '2021-10-13T15:59:59','2021-10-13T16:01:59', '2021-10-13T16:59:59', '2021-10-13T17:01:59', '2021-10-13T17:59:59', '2021-10-13T18:01:59', '2021-10-13T18:59:59', '2021-10-13T19:01:59', '2021-10-13T19:59:59', '2021-10-13T20:01:59', '2021-10-13T20:59:59']
data:time
}
],
yAxis: [
{
type: 'value',
name: '降水量',
min: 0,
max: 3.5,
position: 'left',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} mm'
}
},
],
// 缩放组件
dataZoom: [{
type: 'slider',
startValue: 0, // 从头开始。
endValue: 55 // 一次性展示6个。
}],
series: [
{
name: '降水量',
type: 'bar',
barWidth: '30%', //barWidth设置每根柱状图的宽度
// data: [0.4,1,0.3,0.5,3,2.1,1.2,1.2,1.5,0.5,1.3,1,0.5,1.4,3.0,0.4,1.2,0.6,3,0.1,1.1,0.9,0.4,0.1,1.2,1.2,1.5,0.5,1.3,1,2,1.4,0.4,1.1,0.9,2.4,1.2,1.2,1.2,0.5,3,2.1,1.2,1.2,1.5,0.5,1.3,1,2,1.4,0.4,1.2,0.6,]
data:KSMC
},
{
name: '当日雨量累计值',
type: 'bar',
barWidth: '10%', //barWidth设置每根柱状图的宽度
data:[]
}
]
};
// var index = 0; //播放所在下标
// setTimeout(()=>{
// myChart.dispatchAction({
// type: 'showTip',
// seriesIndex:0,
// dataIndex: 2 //默认显示第几个
// });
// index++;
// if(index > KSMC.length) {
// index = 0;
// }
// })
var times = setInterval(function () {
// 每次向后滚动一个，最后一个从头开始。
if (option.dataZoom[0].endValue == KSMC.length ) {
option.dataZoom[0].endValue = 55;
option.dataZoom[0].startValue = 0;
}
else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
}
myChart.setOption(option);
}, 2000);
截图如下
