代码中已有2023年的数据在这个代码基础上再增加20212022年1-12月的入场和出场数据并使用一些假数据在一个图例中有三个柱形图使每一年柱形图分开上下并排给出js代码thisdefinecar function o2loadechartUrl function 基于准备好的dom初始化echarts实例 var myCar = echartsinitdocu

this.define("car", function () { o2.load(echartUrl, function () { // 基于准备好的dom,初始化echarts实例 var myCar = echarts.init(document.getElementById('car')); options = { title: { text: "车流量统计", left: 'right', textStyle: { color: '#fff' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },

        },
        legend: {
            x: 'center',
            y: '0',
            icon: 'circle',
            itemGap: 8,
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize: 16
            },
            itemWidth: 10,
            itemHeight: 10,
        },
        grid: {
            left: '0',
            top: '30',
            right: '15',
            bottom: '0',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['2021年1月', '2021年2月', '2021年3月', '2021年4月', '2021年5月', '2021年6月', '2021年7月', '2022年1月', '2022年2月', '2022年3月', '2022年4月', '2022年5月', '2022年6月', '2022年7月'],
            axisLine: { show: false },

            axisLabel: {
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                }
            },
        },

        yAxis: {
            type: 'value',
            splitNumber: 4,
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.05)'
                }
            },
            axisLabel: {
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14
                },
            },
        },
        series: [{
            name: '入场车流量',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8bd46e'
                    }, {
                        offset: 1,
                        color: '#03b48e'
                    }]),
                    barBorderRadius: 11,
                }

            },
            data: [6609, 7502, 7948, 6589, 7403, 7086, 4547, 5000, 6000, 7000, 8000, 9000, 10000, 11000]

        },
        {
            name: '出场车流量',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3893e5'
                    }, {
                        offset: 1,
                        color: '#248ff7'
                    }]),
                    barBorderRadius: 11,
                }
            },
            data: [6541, 7430, 7860, 6426, 6998, 6970, 4357, 4500, 5500, 6500, 7500, 8500, 9500, 10500]

        },
        {
            name: '2023年入场车流量',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8bd46e'
                    }, {
                        offset: 1,
                        color: '#03b48e'
                    }]),
                    barBorderRadius: 11,
                }

            },
            data: [6609, 7502, 7948, 6589, 7403, 7086, 4547]

        },
        {
            name: '2023年出场车流量',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3893e5'
                    }, {
                        offset: 1,
                        color: '#248ff7'
                    }]),
                    barBorderRadius: 11,
                }
            },
            data: [6541, 7430, 7860, 6426, 6998, 6970, 4357]

        },


        ]
    };
    myCar.setOption(options);
    window.addEventListener("resize", function () {
        car.resize();
    });
}.bind(this));

}

标签: 科技


原文地址: https://cveoy.top/t/topic/iiYd 著作权归作者所有。请勿转载和采集!