let datas = [
{
name: '2021-06-13 17:00:00',
value: 16,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-13 18:00:00',
value: 13,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-13 19:00:00',
value: 17,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-13 20:00:00',
value: 19,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-13 21:00:00',
value: 19,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-13 22:00:00',
value: 20,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-13 23:00:00',
value: 22,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 00:00:00',
value: 21,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 01:00:00',
value: 20,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 02:00:00',
value: 24,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 03:00:00',
value: 24,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 04:00:00',
value: 20,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 05:00:00',
value: 18,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 06:00:00',
value: 18,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 07:00:00',
value: 18,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 08:00:00',
value: 18,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 09:00:00',
value: 17,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 10:00:00',
value: 19,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 11:00:00',
value: 18,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 12:00:00',
value: 17,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 13:00:00',
value: 18,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 14:00:00',
value: 20,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 15:00:00',
value: 18,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 16:00:00',
value: 16,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 17:00:00',
value: 18,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 18:00:00',
value: 20,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 19:00:00',
value: 21,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 20:00:00',
value: 23,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 21:00:00',
value: 24,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 22:00:00',
value: 23,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-14 23:00:00',
value: 24,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 00:00:00',
value: 23,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 01:00:00',
value: 23,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 02:00:00',
value: 24,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 03:00:00',
value: 24,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 04:00:00',
value: 23,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 05:00:00',
value: 24,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 06:00:00',
value: 25,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 07:00:00',
value: 26,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 08:00:00',
value: 27,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 09:00:00',
value: 26,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 10:00:00',
value: 24,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 11:00:00',
value: 25,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 12:00:00',
value: 28,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 13:00:00',
value: 31,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 14:00:00',
value: 36,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 15:00:00',
value: 43,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 16:00:00',
value: 42,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 17:00:00',
value: 41,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 18:00:00',
value: 35,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 19:00:00',
value: 31,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 20:00:00',
value: 31,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 21:00:00',
value: 31,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 22:00:00',
value: 29,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-15 23:00:00',
value: 29,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 00:00:00',
value: 29,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 01:00:00',
value: 29,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 02:00:00',
value: 29,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 03:00:00',
value: 29,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 04:00:00',
value: 30,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 05:00:00',
value: 33,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 06:00:00',
value: 34,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 07:00:00',
value: 35,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 08:00:00',
value: 38,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 09:00:00',
value: 37,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 10:00:00',
value: 32,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 11:00:00',
value: 32,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 12:00:00',
value: 33,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 13:00:00',
value: 35,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 14:00:00',
value: 34,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 15:00:00',
value: 33,
itemStyle: {
color: '#64C601',
},
},
{
name: '2021-06-16 16:00:00',
value: 32,
itemStyle: {
color: '#64C601',
},
},
];
option = {
dataZoom: [
{
type: 'inside',
xAxisIndex: [0],
zoomLock: true,
startValue: datas.length - 20,
end: 100,
preventDefaultMouseMove: true,
},
],
tooltip: {
trigger: 'axis',
triggerOn: 'none',
backgroundColor: '#3BBFF5',
formatter: function ([param]) {
return `${param.axisValue} ${param.seriesName}:${param.value}`;
},
position: function (point, params, dom, rect, size) {
return [point[0], point[1] - 45];
},
textStyle: {
color: '#FFFFFF',
},
borderWidth:0,
extraCssText: 'border-radius: 37px 37px 37px 0px;box-shadow: 0px 2px 5px rgba(98, 170, 255, 0.45);',
},
grid: {
left: 0,
right: '2%',
bottom: '3%',
top: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
data: datas.map((t) => t.name).concat(new Array(5).fill('')),
axisTick: {
alignWithLabel: true,
},
axisLine: { show: false },
axisTick: { show: false },
},
yAxis: {
type: 'value',
scale: true,
axisLine: {},
axisTick: {},
min: '0',
},
series: {
name: 'AQI',
type: 'bar',
barWidth: '70%',
lineStyle: {
width: 3,
},
data: datas,
},
};
setTimeout(function () {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: datas.length - 1,
});
myChart.on('dataZoom', function ({ batch }) {
let [b] = batch;
let diff = b.end - b.start,
sum = b.start + b.end,
r = ((sum - 100) / (100 - diff)) * diff;
let index = Math.round((datas.length * (sum + r)) / 200);
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index >= datas.length ? datas.length - 1 : index,
});
});
}, 100);