echarts 实现横向bar颜色渐变

最新推荐文章于 2024-08-08 13:18:39 发布

Gang_liu_a

最新推荐文章于 2024-08-08 13:18:39 发布

阅读量768

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/Gang_liu_a/article/details/117926981

版权

这段代码展示了如何使用Echarts库创建一个带有阴影效果的柱状图。通过设置tooltip、grid、xAxis、yAxis的属性来定制图表样式，并定义了一个动态颜色的线性渐变。数据系列中设置了barWidth和itemStyle，以实现柱状图的宽度和颜色渐变。最后调用myChart.setOption()方法更新图表。

摘要由CSDN通过智能技术生成

多说无益，上码______

let chartDom = document.getElementById('myEchart4');
    let myChart = echarts.init(chartDom);
    let option;

    option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '20%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            // splitLine:{show: false},
            show: false
        },
        yAxis: {

            // show: false,
            type: 'category',
            data: y,
            axisTick: {
                show: false
            },

            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                left:10,
                textStyle: {
                    color: '#fff',
                    fontSize:'11',
                    // align:'right',
                },
                formatter: function(value) {
                    // console.log(value)
                    let res = value;
                    if(res.length > 8) {
                        res = res.substring(0, 8) + "..";
                    }
                    return res;
                },
            },

        },
        series: [

            {
                barWidth: 15,
                itemStyle: {
                    //通常情况下：
                    normal: {
                        barBorderRadius: 8,
                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function (params) {
                            let colorList = [
                                ['rgb(14,102,179)', 'rgb(51,36,169)'],
                                ['#0ED7EE', '#0076FF'],
                                ['#A69CEF', '#6C19DA'],
                                ['#73FFB2', '#00B92A'],
                            ];
                            let index = params.dataIndex;
                            if (params.dataIndex >= colorList.length) {
                                index = params.dataIndex - colorList.length;
                            }
                            return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                                [{
                                    offset: 0,
                                    color: colorList[index][0]
                                },
                                    {
                                        offset: 1,
                                        color: colorList[index][1]
                                    }
                                ]);
                        }
                    },
                },

                // name: '2011年',
                type: 'bar',
                width: '15',
                data: x
            },

        ]
    };

    myChart.setOption(option,true);