折线图

myChart.setOption({
title: {
text: '2024年全国降雨量统计',
show: false
},
legend: {
show: true
},
toolbox: {
show: true,
feature: {
magicType: { show: true, type: ['stack', 'tiled'] },
saveAsImage: { show: true }
}
},
tooltip: {},
xAxis: {
name: '降雨量/ML',
data: [
{
value: '0-100',

                    textStyle: {
                        fontSize: 20,
                        color: 'red'
                    }
                }, {
                    value: '100-500',
                    textStyle: {
                        fontSize: 20,
                        color: 'red'
                    }
                }, {
                    value: '500-1000',
                    textStyle: {
                        fontSize: 20,
                        color: 'red'
                    }
                }, {
                    value: '1000-2000',
                }, {
                    value: '2000-5000',
                }, {
                    value: '5000以上',
                }]
        },
        yAxis: {
            name: '天数'
        },
        series: [{
            name: '降雨量',
            type: 'line',
            label: {
                show: true,
                position: 'top',
                formatter: (params) => {
                    return params.value + '天'
                }
            },
            itemStyle: {
                color: 'rgba(255, 152, 0, .7)'
            },
            smooth: true,
            tooltip: {
                formatter: (params) => {
                    return '2024年' + params.seriesName + '<br />' + params.name + '总天数为' + '<br/>' + params.value + '天'
                },
                textStyle: {
                    color: 'blue',
                    textShadowColor: 'green',
                    textShadowBlur: 2,
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                },
                extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
            },

            symbol: 'image://src/assets/vue.svg',

            symbolSize: 20,
            symbolRotate: (value, params) => {
                const seriesData = myChart.getOption().series[0].data;
                const dataLength = seriesData.length;
                switch (params.dataIndex) {
                    case 0: return (seriesData[params.dataIndex + 1] - seriesData[params.dataIndex]) * 25;
                    case 1: return (seriesData[params.dataIndex + 1] - seriesData[params.dataIndex]) * 25;
                    case 2: return (seriesData[params.dataIndex + 1] - seriesData[params.dataIndex]) * 25;
                    case 3: return (seriesData[params.dataIndex + 1] - seriesData[params.dataIndex]) * 25;
                    case 4: return (seriesData[params.dataIndex + 1] - seriesData[params.dataIndex]) * 25;
                    case 5: return 0;
                }
            },
            stack: 'value',
            symbolKeepAspect: true,
            data: [Math.floor(Math.random() * 30), Math.floor(Math.random() * 30), Math.floor(Math.random() * 30), Math.floor(Math.random() * 30), Math.floor(Math.random() * 30), Math.floor(Math.random() * 30)]
        },
        ],
    })