Toggle navigation
混合柱状图，柱子在时间段内显示
By
k***h
2020-09-08 06:42:06
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
let minslots=["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45","21:00","21:15","21:30","21:45","22:00","22:15","22:30","22:45","23:00","23:15","23:30","23:45"] let maxslots=["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"] let maxdata=[3160.64453125,3256.542724609375,3129.1013793945312,3178.9060668945312,3179.492431640625,3163.47705078125,3194.7265014648438,3121.9725341796875,3223.9253540039062,3181.3485717773438,3190.6242065429688,3165.723388671875,3208.3980102539062,3138.867431640625,3056.2493286132812,3012.5001831054688,3010.253662109375,3019.1405029296875,3098.1444702148438,3049.0242919921875,3125.0970458984375,3204.6875,3205.3709716796875,3155.9573974609375] let mindata=[3229.6875,3104.296875,3182.42236328125,3126.1712646484375,3246.0947265625,3357.8080444335938,3264.4539794921875,3157.81396484375,3126.9541015625,3220.703125,3155.4683837890625,3013.280029296875,3144.1416015625,3157.423583984375,3214.451171875,3199.6080322265625,3177.7379150390625,3245.7039794921875,3063.6700439453125,3230.85791015625,3192.96923828125,3092.970703125,3215.6224365234375,3152.3455810546875,3125.38916015625,3144.9219970703125,3217.9678955078125,3290.627197265625,3230.0748291015625,3140.2364501953125,3043.3560180664062,3074.2232666015625,3219.531982421875,3222.6552734375,3243.7496337890625,3209.7647705078125,3274.218017578125,3026.95361328125,3203.1292724609375,3221.0931396484375,3114.0604248046875,3260.9375,3234.3736572265625,3153.125244140625,3199.2183837890625,3040.62841796875,3235.93359375,3187.1131591796875,3200.388427734375,3310.1556396484375,3126.5611572265625,3196.4866943359375,3114.8455810546875,3220.69921875,3139.4560546875,3080.4688720703125,3143.3574829101562,3078.126708984375,2874.6080322265625,3128.9051513671875,3075.390380859375,3064.45361328125,2944.921630859375,2965.2351684570312,2968.3603515625,2943.75,3042.9691162109375,3085.9351806640625,3013.673583984375,3115.231201171875,2948.4383544921875,2999.21875,3150.7823486328125,3021.483154296875,3171.09716796875,3049.2152099609375,3098.4424438476562,3105.0732421875,2949.6119384765625,3042.9696044921875,3002.3399658203125,3147.6551513671875,3030.46923828125,3319.9239501953125,3216.795654296875,3210.157958984375,3204.296875,3187.4996337890625,3261.3272705078125,3242.57958984375,3119.9228515625,3197.6544189453125,3178.905517578125,3088.6728515625,3113.673583984375,3242.5775146484375]; let maxNewData = mindata.map((item, index) => { if (index % 4 === 2) { return item; } return ''; }) let minslots2=minslots // mindata.push('') // maxslots.push('24:00') // maxdata.push('') option = { dataZoom:[{ // minSpan:50, // end:50, endValue:30, // zoomLock: true, }], tooltip:{ trigger:'axis', }, grid:{ bottom:100 }, xAxis: { type: 'category', data: minslots2, // interval:0, axisTick:{ alignWithLabel:true, interval:3 }, axisLabel:{ // show:false, interval:3 } // max:94 }, yAxis: { type: 'value' }, series: [{ data: maxNewData, type: 'bar', // showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' }, barWidth:8, color:'#088', // xAxisIndex:1 }, { type:'line', color:'#a90a09aa', // xAxisIndex:0, data:mindata, } // { // type:'line', // data:mindata, // }, ] };
