【echarts】渐变色格状横条图

最新推荐文章于 2024-07-31 00:25:36 发布

thinkasany

最新推荐文章于 2024-07-31 00:25:36 发布

阅读量229

点赞数 2

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/daddykei/article/details/139346560

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

案例来源

https://www.makeapie.cn/echarts_content/xutsGwXHGt.html

效果

在这里插入图片描述

源码

let list = [{
        name: '中和',
        value: 6
    }, {
        name: '西园',
        value: 1
    }, {
        name: '肖家河',
        value: 0
    }, {
        name: '石羊',
        value: 8
    }, {
        name: '合作',
        value: 0
    },
    {
        name: '桂溪',
        value: 6
    },
    {
        name: '芳草街',
        value: 1
    }
];
let data = ['中和', '西园', '肖家河', '石羊', '合作', '桂溪', '芳草街'];
let values = [6, 1, 0, 8, 0, 6, 1]

option = {
    backgroundColor:'balck',
    xAxis: {
        max: 20,
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        }
    },
    grid: {
        containLabel: true,
        left: 30,
        top: 0,
        right: 60,
        bottom: 0
    },
    yAxis: [{
        data: data,
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14,
                color: '#fff'
            }
        }
    }],
    series: [{ //内
            type: 'bar',
            barWidth: 10,
            legendHoverLink: false,
            symbolRepeat: true,
            silent: true,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: '#12272A' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#62E6F6' // 100% 处的颜色
                    }]
                }
            },
            data: list,
            z: 1,
            animationEasing: 'elasticOut'
        },
        {
            type: 'pictorialBar',
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '20%',
            symbol: 'roundRect',
            symbolSize: [7, 10],
            symbolBoundingData: 20,
            itemStyle: {
                normal: {
                    color: '#12272A',

                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    offset: [0, 2],
                    distance: 30,
                    textStyle: {
                        color: '#7AF8FF',
                        fontSize: 14,
                    }
                },

            },
            data: values,
            z: 0,
            animationEasing: 'elasticOut'
        },
        { //分隔
            type: 'pictorialBar',
            itemStyle: {
                color: '#000'
            },
            symbolRepeat: 'fixed',
            symbolMargin: 4,
            symbol: 'roundRect',
            symbolClip: true,
            symbolSize: [2, 10],
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            symbolBoundingData: 20,
            data: list,
            z: 2,
            animationEasing: 'elasticOut'
        }
    ]
};