这是一个象形柱子和普通渐变柱子结合的柱形图ECharts Gallery

20:11:45图表已生成
代码
var maxData = 400;
var myData = ['大栅栏', '天安门', '故宫', '景山', '北海公园', '后海', '什刹海', '西单', '玉渊潭', '中央电视塔', '东单', '王府井', '南锣鼓巷', '工体', '潘家园', '琉璃厂'];
var databeast = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370, 268, 360, 185, 392, 392, 153]
let color = "#00c7dc";
let splitLine = "#11263e";
let fontSize = 30;
option = {
    backgroundColor: "#030115",
    tooltip: {
        show: true,
        textStyle:{
            fontSize
        }
    },
    grid: {
        bottom: '5%'
    },
    xAxis: {
        type: 'category',
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            margin: 8,
            textStyle: {
                color: '#fff',
                fontSize,
            },

        },
        data: myData,
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false,
        },
        //y轴分割线
        axisTick: {
            show: false,
        },
        position: 'center',
        //y轴标签
        axisLabel: {
            show: true,
            color: color,
            fontSize: fontSize
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: splitLine,
                width: 1,
                type: 'solid',
            },
        },
    },
    series: [{

            type: 'bar',
            barWidth: '50%',
            barGap: '-100%',
            data: databeast,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(45,218,244,.8)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(23,74,141,.8)'
                            }
                        ]
                    ),
                    barBorderRadius: [30, 30, 0, 0]
                },
            },
            // backgroundStyle: {
            //     shadowColor: 'rgba(0, 0, 0, 1)',
            //     shadowBlur: 50
            // },
            zlevel: 9
        },
        {
            // full data
            type: 'pictorialBar',
            tooltip: {
                show: false
            },
            itemStyle: {
                normal: {
                    color: 'rgba(12,41,107,.9)'
                }
            },
            label: {
                normal: {
                    show: false,
                    formatter: function(params) {
                        return (params.value);
                    },
                    position: "top",
                    // offset: [80, -80],
                    textStyle: {
                        color: 'rgba(2,191,138,1)',
                        fontSize: 0
                    }
                }
            },
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '60%',
            symbol: 'rect',
            symbolSize: [50, 8],
            symbolBoundingData: 400,
            data: databeast,
            z: 1,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30;
            }
        },



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

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
