echarts 横向柱状图 颜色渐变

### 实现ECharts横向柱状图的颜色渐变

为了使ECharts中的横向柱状图实现从左到右的渐变色效果，需调整`itemStyle.color`属性下的线性渐变方向参数。具体来说，在定义`LinearGradient`对象时，通过改变坐标轴的方向来控制渐变走向。

对于期望达到水平方向（即从左至右）的渐变色彩过渡，应将`LinearGradient`函数的第一个和第三个参数设为相同的数值，而第二个和第四个参数分别设定不同的值以指示X轴上的变化趋势[^1]：

series: [
    {
        type: 'bar',
        barWidth: 12,
        data: this.justice.num,
        itemStyle: {
            barBorderRadius: [0, 20, 20, 0],
            color: new this.$echarts.graphic.LinearGradient(
                0, // 起始位置 X 坐标比例
                0, // 起始位置 Y 坐标比例
                1, // 结束位置 X 坐标比例
                0, // 结束位置 Y 坐标比例
                [
                    {offset: 0, color: '#FFF1AD'}, 
                    {offset: 1, color: '#FC5090'}
                ]
            )
        },
        label: {
            show: true,
            position: 'right',
            textStyle: {
                color: '#fff',
                fontSize: 10
            }
        }
    }
]

值得注意的是，如果遇到无法显示预期渐变效果的情况，可能是因为使用的库实例化方式不同所引起的兼容性问题。此时可以尝试使用全局变量`$echarts`代替直接调用`echarts`来进行图形组件创建[^2]。