根据需要参考代码

• 1 实现图表下方的伸缩条
• 2 柱状图根据数值范围不同而颜色不同的柱状图
• 3 折现图

       function histogram() {
                var newarr = ForecastTimesp.map((v, i) => {
                    return v.substring(5, 10)
                })
                var myChart = echarts.init(document.getElementById('mainhistogram'));
                for (var i = 0; i < Pm25Ozonedata.length; i++) {
                    console.log(Pm25Ozonedata[i])
                }
                option = {
                    title: {
                        text: '',
                        subtext: '',
                    },
                    grid: {
                        width: 370,
                        containLabel: true,
                        left: 0,
                        bottom: 100,

                    },
                  `1 图表下方的伸缩条`
                    dataZoom: [{
                        type: 'slider',//图表下方的伸缩条
                        show: true, //是否显示
                        realtime: true, //拖动时，是否实时更新系列的视图
                        start: 0, //伸缩条开始位置（1-100），可以随时更改
                        end: 100, //伸缩条结束位置（1-100），可以随时更改
                        height: 20,
                        bottom: 70,

                    }],
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['PM2.5', '风速风向', '湿度', '温度'],
                        bottom: 1,
                        left: 0,
                    },
                    toolbox: {
                        show: true,
                        left: '15%',
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: newarr
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            onZero: false
                        }
                    ],
                    series: [
        
                `2 柱状图根据数值范围不同而颜色不同的柱状图` 
                        {
                            name: 'PM2.5',
                            type: 'bar',
                            data: Pm25Ozonedata,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var index_color = params.value;
                                        if (index_color <= 35) {
                                            return '#00ff00';
                                        } else if (index_color > 35 && index_color <= 75) {
                                            return '#f5fc13';
                                        } else if (index_color > 75 && index_color <= 115) {
                                            return '#ff8400';
                                        } else if (index_color > 115 && index_color <= 150) {
                                            return '#fc0000';
                                        } else if (index_color > 150 && index_color <= 250) {
                                            return '#9b004f';
                                        } else if (index_color > 250 && index_color <= 500) {
                                            return '#860023';
                                        }
                                    }
                                }
                            }
                        },
                        {
                            name: '风速风向',
                            type: 'line',
                            data: wind_speed,
                            color: '#00A0E9',
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            }
                        },
                        {
                            name: '湿度',
                            type: 'line',
                            data: humidity,
                            color: '#FF00FF',
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                        },
                        {
                            name: '温度',
                            type: 'line',
                            data: temperature,
                            color: '#7F8DF6',
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            roam: true,

                        },
                    ]
                };
                myChart.setOption(option);
            }
            histogram();