Echarts在线免费图表

 
            var pm = [15, 13, 11, 9, 13, 15, 16, 14, 13, 12, 13, 7];

var qg = [7.5, 6.5, 4, 3.3, 3.4, 3.5, 3.6, 3.9, 4, 3.8, 3.6, 2.4]

var gs = [8.1, 8.4, 7.9, 7.7, 7.1, 5.6, 5.5, 5.9, 6.1, 6.4, 6, 7.5]

let getMax = [...qg,...gs]

let max = Math.ceil(Math.max(...getMax) )

var datalist = [];

pm.forEach((item, index) => {
    var obj2 = {
        xAxis: index,
        label: {
            show: true,
            formatter:`第${String(item)}名`   
        }
    }
    datalist.push(obj2)
})
var option = {
    backgroundColor: '#011f4b',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line'
        }
    },
    // color: ['#b2f4f8', '#ffcb4d', '#12fffe'],
    legend: {
        right: 10,
        top: 10,
        textStyle: {
            color: "#B3D9E4",
            fontSize: 16
        },
        // icon: 'circle',
        // itemWidth: 16,
        // itemHeight: 16,
        itemGap: 35
    },
    grid: {
        left: '5%',
        right: '4%',
        bottom: '5%',
        top: '15%',
        // containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: [
            "2022年2月",
            "2022年3月",
            "2022年4月",
            "2022年5月",
            "2022年6月",
            "2022年7月",
            "2022年8月",
            "2022年9月",
            "2022年10月",
            "2022年11月",
            "2022年12月",
            "2023年2月"
        ],
        axisLine: {
            show: true,
            lineStyle: {
                color: "#025D95",
                width: 1,
                type: "solid"
            }
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: true,

            textStyle: {
                color: "#fff",
            }
        },
    }],
    yAxis: [
        {
            type: 'value',
            name: '排名',
            nameTextStyle: {
                color: '#fff'
            },
            min:1,
            splitNumber: 5,
            offset: 0,
            axisLabel: {
                color: '#58A5FF'

            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#025D95",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#025D95",
                    opacity: 0.1,
                    width: 1,
                }
            }
        },
        {
            type: 'value',
            name: '增速(%)',
            nameTextStyle: {
                color: '#fff'
            },
            max: max,
            splitNumber: 5,
            offset: 0,
            axisLabel: {
                formatter: '{value} %',
                color: '#58A5FF'

            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#025D95",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#025D95",
                    width: 1,
                }
            }
        }
    ],
    series: [
        {
            name: '排名',
            type: 'bar',
            data: pm,
            smooth: true,
            barWidth: 10,
            z: 10,
            barGap: 1,
            itemStyle: {
                color: '#0068E8',
            },
            markLine: {
                symbol: [0, 'circle'],
                lineStyle: {
                    normal: {
                        color: "#64C8FE",
                        type: 'solid',
                        width: 2,
                        opacity: 0.9
                    },
                    emphasis: {
                        color: "#d9def7"
                    },
                },
                label: {
                    color: '#fff',
                    fontSize:12
                },
                data: datalist
            }
        },
        {
            name: '全国',
            z: 12,
            data: qg,
            type: 'line',
            yAxisIndex: 1,
            smooth: false, // 平滑曲线显示
            showAllSymbol: false, // 显示所有图形。
            symbolSize: 9,
            symbolColor: '#eee',
            symbol: 'diamond',
            lineStyle: {
                width: 2,
                color: '#D7D631'
            },
            itemStyle: {
                color: '#D7D631',
                shadowColor: '#D9F2FC',
                borderColor: '#D9F2FC',
                borderWidth: 1
            },
            symbolOffset: [0, 0],
        },
        {
            name: '甘肃',
            z: 15,
            data: gs,
            type: 'line',
            yAxisIndex: 1,
            smooth: false, // 平滑曲线显示
            showAllSymbol: false, // 显示所有图形。
            symbolSize: 9,
            symbolColor: '#eee',
            symbol: 'diamond',
            lineStyle: {
                width: 2,
                color: '#ED5400'
            },
            itemStyle: {
                color: '#ED5400',
                shadowColor: '#D9F2FC',
                borderColor: '#D9F2FC',
                borderWidth: 1
            },
            symbolOffset: [0, 0],
        }
    ]
};