柱形堆叠双坐标渐变统计legend点击ECharts Gallery

20:11:45图表已生成
代码
const grayBar = [100, 100]
const colors = ['#1fc779', '#30a3f3'];
option = {
    grid: {
        left: '-50px', // 距离dom间距
        right: '31px',
        top: '7%',
        bottom: '1%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // type: 'shadow'
        },
        padding: 10
    },
    yAxis: [{
        type: "value",
        axisPointer: {
            type: "shadow"
        },
        // 横坐标 分割线等取消显示
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false,

        }
    }],
    xAxis: [{
            show: false,
            type: "category",
            inverse: true,
            axisLabel: {
                verticalAlign: "bottom",
                align: "left",
                padding: [0, 10, 20, 10],
                textStyle: {
                    fontSize: 14,
                    color: "white",
                    fontFamily: "Source Han Sans CN"
                }
            },
            // 纵坐标数据
            data: ["外地扩张", "本地扩张"],

            yAxisIndex: 0,
            // 横坐标 分割线等取消显示
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },

        {
            show: false,
            type: "category",
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                inside: false,
                verticalAlign: "bottom",
                // 位置 上右下左
                padding: [0, 0, -20, 20],
                lineHeight: "40",
                textStyle: {
                    fontSize: 16,
                    color: "white",
                    fontFamily: "SourceHanSansCN-Regular"
                }
            },
            // 统计的总量 用纵坐标模拟
            data: [61, 12],

        },

    ],
    series: [{
            // 实值
            name: '实值',
            show: true,
            type: 'pictorialBar',
            symbol: 'rect',
            symbolSize: [192, 6], //图形元素的尺寸
            symbolMargin: 2,
            symbolRepeat: 'repeat',
            barWidth: 192, // 统计条宽度
            itemStyle: {
                normal: {
                    color: function(params) {
                        return colors[params.dataIndex];
                        // 取每条数据的 index 对应 colors 中的 index 返回这个颜色
                    }
                },
            },
            z: 3,
            data: [61, 12],
            // data:[
            //     {value:61,symbol:"path://M0 0h2160.527473v180.043956H0z"},
            //     {value:12,symbol:"path://M0 0h2160.527473v180.043956H0z"},
            //     ],
            animationDelay: (dataIndex, params) => { //每个图形动画持续时间
                return params.index * 20;
            },
            animationEasing: 'quinticOut' //动画效果


        },

        {
            // 全
            name: '总值',
            show: true,
            type: 'pictorialBar',
            symbol: 'rect',
            symbolSize: [192, 6], //图形元素的尺寸
            symbolMargin: 2,
            symbolRepeat: 'repeat',
            barGap: '-100%', //设置刘昂个柱子重叠
            barWidth: 192, //统计条宽度
            itemStyle: {
                normal: {
                    color: '#2B3567',
                },
            },
            z: 1,
            data: grayBar,
            animationDelay: (dataIndex, params) => { //每个图形动画持续时间
                return params.index * 20;
            },
            animationEasing: 'quinticOut' //动画效果

        },


    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
