负值 radiusecharts category' }, yAxis: [ { "type":"value", "scale":true, "splitLine":{ "show":true, "type":"dashed", "lineStyle":{ "opacity":0.4 } }, "splitNumber": 5 }, { "show": false, "type":"value", "scale":true, "splitNumber": 5 } ], series: [ { id: 'sq配置项内容和展示

配置项如下
      option = {
    legend: {
        show: true,
        itemWidth: 15,
        selectedMode: false,
        data: [
            {
                name: '去年',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#75CFCF',
                            },
                            {
                                offset: 1,
                                color: '#225A5E',
                            },
                        ],
                        global: false,
                    },
                },
            },
            {
                name: '本年',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#7586CF',
                            },
                            {
                                offset: 1,
                                color: '#30407D',
                            },
                        ],
                        global: false,
                    },
                },
            },
            {
                name: '同比',
                itemStyle: {
                    color: '#9CB0FF',
                },
            },
        ],
    },
    tooltip: {
        "backgroundColor":"rgba(255,255,255,0.95)",
        trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: (item)=>{
              debugger;
              return '<p><div style="display:inline-block;background-color:blue;width:0.6rem;height:0.6rem;"></div>   名称</p><p><div style="display:inline-block;background-color:blue;width:0.6rem;height:0.6rem;"></div>   名称</p>';
          }
    },
    dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中,
        // 默认把第一个维度映射到 X 轴上,第二个维度映射到 Y 轴上。
        // 如果不指定 dimensions,也可以通过指定 series.encode
        // 完成映射,参见后文。
        dimensions: ['month', 'dq', 'sq', 'tb'],
        source: [
            { month: 'Matcha Latte', dq: 43.3, sq: 85.8, tb: 0.44 },
            { month: 'Milk Tea', dq: 83.1, sq: 73.4, tb: 0.44 },
            { month: 'Cheese Cocoa', dq: 86.4, sq: 65.2, tb: 0.44 },
            { month: 'Walnut Brownie', dq: 72.4, sq: 53.9, tb: 0.44 },
        ],
    },
    xAxis: { type: 'category' },
    yAxis: [
        {
                    "type":"value",
                    "scale":true,
                    "splitLine":{
                        "show":true,
                        "type":"dashed",
                        "lineStyle":{
                            "opacity":0.4
                        }
                    },
                    "splitNumber": 5
                },
                {
                    "show": false,
                    "type":"value",
                    "scale":true,
                    "splitNumber": 5
                }
    ],
    series: [
        {
            id: 'sq',
            name: '去年',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
                barBorderRadius: 8,
                color: function (item) {
                    var indexValue = item.data[item.seriesId];
                    if (indexValue >= 0) {
                        return {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [
                                { offset: 0, color: 'rgba(25,27,42,0)' },
                                { offset: 0.1, color: '#225A5E' },
                                { offset: 1, color: '#75CFCF' },
                            ],
                        };
                    } else {
                        return {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(25,27,42,0)' },
                                { offset: 0.1, color: '#225A5E' },
                                { offset: 1, color: '#75CFCF' },
                            ],
                        };
                    }
                },
            },
        },
        {
            id: 'dq',
            name: '本年',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
                barBorderRadius: 8,
                color: function (item) {
                    var indexValue = item.data[item.seriesId];
                    if (indexValue >= 0) {
                        return {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 0,
                            colorStops: [
                                { offset: 0, color: 'rgba(25,27,42,0)' },
                                { offset: 0.1, color: '#30407D' },
                                { offset: 1, color: '#7586CF' },
                            ],
                        };
                    } else {
                        return {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(25,27,42,0)' },
                                { offset: 0.1, color: '#30407D' },
                                { offset: 1, color: '#7586CF' },
                            ],
                        };
                    }
                },
            },
        },
        {
            id: 'tb',
            name: '同比',
            type: 'line',
            yAxisIndex: 1,
            label: {
                show: true,
                position: 'top',
                backgroundColor: {
                    image:
                        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAdCAYAAAD1uwHJAAAABHNCSVQICAgIfAhkiAAAAmFJREFUWEftWDFoFFEQndlDSeCIVobsnansFKytjIRDRHJ3IEFLQavsSgpRL0QrmxQGi7skiBwpLUSyFzsLK7FRURG1EBHN7apdtLG6P749jOS4u8BuPnv7Ib/8zLx98/782fnD1GcV3eY0izVJTMdgMs5EI/1s07ovTL/A+xv4vSOhJ17N9npxhU3nKjp+gZkWmXg8rcHF5yWfWfHs2rL9bDtGhwglN6hgoxL/I+n3FBIlIvPrS/mVLbb/RSg7wRxS/0b6w9DDUIgWGjV7IURrizDlbpzJUOaBHnijUC6hTjziiZn32QPWwVeoAaNG0ddAFtnQ3P9z7DiXHP8yM9/RgGkkhFKtCxAheIi/QcHICHSQZqoz/ggfURjGdOCZiaHehCL8gAhDZgagg7VsctkNNnVAmYyxJ0LYJ+xlAkQouX4TPULW5HTeDXf0Cr/DPuEl+oQjuwEy21c+cNnx68R8zuxA4rNXQqvhdTiP63AvPozZnorkLJ+Y3hg+NJp5gV4hb3Y40dnjWf22UcudbL8iizPfT1mWrEWHMdyjRZPeio3H47+FidI1i3ne8LAi0JerXi1XDx06JktF17+OjTnUiK6xWwT0lJtKSzFX1qv2/S2iXcHiLXEam3dhYKc8msj00BN8IiWzjeXc8+3OPU984uKXoZHsvikmq4BcOYpJ7WFTp80k8hX8Xyuip4+Xco1eyiWa9tEGuXILd7Ya+bhjOCQqQsgPA93byK4rO3NNToCuwhhDxFguOwuRrAADE6F/RiQvwEBF6BZiMAIMXIR2t+oENy1L/fGq+cVYd0uD019eMLJmTFq+FgAAAABJRU5ErkJggg==',
                },
                padding: [10, 10, 15, 10],
                distance: 5,
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: {
                        isFunction: true,
                        type: 'script_exp',
                        formatter: "domUtils.getPxFromRem('0.15rem')",
                    },
                }
            },
            smooth: false,
            symbolSize: 10,
            lineStyle: {
                color: '#9CB0FF',
                width: 2.5,
                shadowBlur: 5,
                shadowColor: '#1C1F2E',
                shadowOffsetY: 10,
            },
            itemStyle: {
                color: '#9CB0FF',
                borderColor: '#fff',
                borderWidth: 2,
            },
        },
    ],
};

    
截图如下