echarts使用title代替坐标轴名称

心已赠人 2022-12-27 11:23 216阅读 0赞

坐标轴名称的位置，随着名称长度、坐标轴最值长度的变化，属实难以控制，所以尝试使用title取代：

option = {
            title: [{
                text: "单位：左边一个坐标轴名称",
                left: "18px",
                top: 0,
                textStyle: {
                    color: "#999",
                    fontSize: 12,
                    fontWeight: '400'
                }
            }, {
                text: "单位：右边一个坐标轴名称",
                right: "18px",
                top: 0,
                textStyle: {
                    color: "#999",
                    fontSize: 12,
                    fontWeight: '400'
                }
            }],
            grid: {
                left: '25',
                right: '25',
                bottom: '24',
                top: '75',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
            },
            yAxis: [{
                type: 'value',
                axisLabel: {
                    color: '#999',
                    textStyle: {
                        fontSize: 12
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#F3F4F4'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
            }, {
                type: 'value',
                axisLabel: {
                    color: '#999',
                    textStyle: {
                        fontSize: 12
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#F3F4F4'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
            }],
            series: [{
                    name: '订单总数',
                    type: 'line',
                    smooth: true,
                    data: [3, 2, 4, 4, 5, 3, 8],
                    yAxisIndex: 0,
                },
                {
                    name: '消费金额',
                    type: 'line',
                    smooth: true,
                    data: [999, 54, 34, 2222, 32225, 1111],
                    yAxisIndex: 1,
                }
            ]
        };

很完美（神奇的title，很多场景都可以用title处理）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70]: /images/20221120/89f83e4f4a3544389b123bc5d6dc1b94.png