python_weather/web/js/chart4.js

function echarts_4() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart4'));

    var xData = Chart4_Data.x;
    var yData = Chart4_Data.y;

    // 指定图表的配置项和数据
    var option = {
        // title: {
        //     text: '重庆市现在平均气温地区排名',
        //     subtext: '数据来源：气象局'
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            textStyle: { // 设置图例文字的样式
                color: '#fff' // 设置图例文字颜色为白色
            },
            formatter: function (params) {
                return params[0].name + ': ' + params[0].value + '℃';
            }

        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        grid: {
            left: '10',
            top: '30',
            right: '10',
            bottom: '10',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xData,
            axisLabel: {
                interval: 0,
                // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            }
        },
        yAxis: {
            type: 'value',
                        interval: 0.3, // 指定刻度间隔
            min:24.5,
            max:26,
            axisLabel: {
                formatter: '{value}°C', // Add the °C unit to the formatter

            },
            axisLabel: {
                // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            }
        },
        series: [
            {
                name: '平均气温',
                type: 'bar',
                data: yData,
                itemStyle: {
                    color: '#FF6600'
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}