Vue + ECharts 象形柱状图 pictorialBar

前言：由于公司可视化数字大屏项目需要用到了象形柱状图，所以在博客里记录一下！如果能帮到你，那么点个赞吧，哈哈哈

话不多说，直接先上效果图：
创建一个vue组件，我这里由于项目取名为：departmentsTop5.vue

HTML：

<template>
    <div class="absolute-left-right-top-bottom charts-main">
        <div class="map-bottom">
            <div ref="main" class="charts-item"/>
        </div>
    </div>
</template>

JS：

<script>
import * as echarts from 'echarts';

export default {
    name: 'departmentsTop5',
    components: {},
    data() {
        return {
            adapters: [
                {
                    name: '妇科',
                    count: 5,
                    rate: 87,
                    index: 0
                },
                {
                    name: '产科',
                    count: 5,
                    rate: 61,
                    index: 1
                },
                {
                    name: '内分泌科',
                    count: 25,
                    rate: 50,
                    index: 2
                },
                {
                    name: '计划生育科',
                    count: 15,
                    rate: 32,
                    index: 3
                },
                {
                    name: '麻醉科',
                    count: 35,
                    rate: 24,
                    index: 4
                }
            ],
            option5: {
                xAxis: {
                    max: 100,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                grid: {
                    left: 123,
                    top: 20, // 设置条形图的边距
                    right: 80,
                    bottom: 20
                },
                yAxis: [{
                    type: 'category',
                    inverse: false,
                    data: ['麻醉科', '计划生育科', '内分泌科', '产科', '妇科'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                }],
                series: [{
                    // 内-值
                    // type: 'bar',
                    type: 'pictorialBar',
                    symbol: 'roundRect',
                    symbolRepeat: true,
                    animationDuration: 0,
                    // 宽度-高度
                    symbolSize: [6, 12],
                    // 间隙
                    symbolMargin: '32%',
                    legendHoverLink: true,
                    silent: true,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                var color;
                                if (params.dataIndex === 4) {
                                    color = {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#FF0066' // 0% 处的颜色
                                        },
                                            {
                                                offset: 1,
                                                color: '#FF5AAC' // 100% 处的颜色
                                            }
                                        ]
                                    }
                                } else if (params.dataIndex === 3) {
                                    color = {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#FF5400' // 0% 处的颜色
                                        },
                                            {
                                                offset: 1,
                                                color: '#FFC75A' // 100% 处的颜色
                                            }
                                        ]
                                    }
                                } else if (params.dataIndex === 2) {
                                    color = {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#02B317' // 0% 处的颜色
                                        },
                                            {
                                                offset: 1,
                                                color: '#37E08B' // 100% 处的颜色
                                            }
                                        ]
                                    }
                                } else {
                                    color = {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#16D8E9' // 0% 处的颜色
                                        },
                                            {
                                                offset: 1,
                                                color: '#2357EB' // 100% 处的颜色
                                            }
                                        ]
                                    }
                                }
                                return color;
                            }
                        }
                    },
                    label: {
                        // 左字
                        normal: {
                            show: true,
                            position: 'left',
                            formatter: '{b}',
                            textStyle: {
                                color: '#E9F4FF',
                                fontSize: 16,
                                fontWeight: 'bold',
                                padding: [0, 17, 0, 0]
                            }
                        }
                    },
                    data: ['11', '23', '23', '33', '55'],
                    z: 1,
                    animationEasing: 'elasticOut'
                },
                    {
                        // 内-背景
                        // type: 'bar',
                        type: 'pictorialBar',
                        symbol: 'roundRect',
                        animationDuration: 0,
                        symbolRepeat: true,
                        // 宽度-高度
                        symbolSize: [6, 12],
                        // 间隙
                        symbolMargin: '32%',
                        legendHoverLink: true,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: 'rgba(50,71,179,0.4)'
                            }
                        },
                        data: ['100', '100', '100', '100', '100'],
                        z: -100,
                        animationEasing: 'elasticOut'
                    },
                    {
                        // 外边框
                        type: 'pictorialBar',
                        symbol: 'rect',
                        symbolBoundingData: 100,
                        itemStyle: {
                            normal: {
                                // color: 'rgba(50,71,179,0.4)'
                                color: 'none'
                            }
                        },
                        label: {
                            normal: {
                                formatter: (params) => {
                                    var text;
                                    if (params.dataIndex === 4) {
                                        text = '{d|  ' + params.data + '%' + '}';
                                    } else if (params.dataIndex === 3) {
                                        text = '{c|  ' + params.data + '%' + '}';
                                    } else if (params.dataIndex === 2) {
                                        text = '{b|  ' + params.data + '%' + '}';
                                    } else {
                                        text = '{a|  ' + params.data + '%' + '}';
                                    }
                                    return text;
                                },
                                rich: {
                                    a: {
                                        color: '#E9F4FF',
                                        fontSize: 16,
                                        fontWeight: 'bold'
                                    },
                                    b: {
                                        color: '#37E08B',
                                        fontSize: 16,
                                        fontWeight: 'bold'
                                    },
                                    c: {
                                        color: '#FFC75A',
                                        fontSize: 16,
                                        fontWeight: 'bold'
                                    },
                                    d: {
                                        color: '#FF0066',
                                        fontSize: 16,
                                        fontWeight: 'bold'
                                    }
                                },
                                position: 'right',
                                distance: 2, // 向右偏移位置
                                show: true
                            }
                        },
                        data: ['11', '23', '23', '33', '55'],
                        z: 0,
                        animationEasing: 'elasticOut'
                    },
                    // { //可以根据自己需求选用
                    //     name: '外框',
                    //     type: 'bar',
                    //     barGap: '-120%', // 设置外框粗细
                    //     data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                    //     barWidth: 25,
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'transparent', // 填充色
                    //             barBorderColor: '#1C4B8E', // 边框色
                    //             barBorderWidth: 1, // 边框宽度
                    //             // barBorderRadius: 0, //圆角半径
                    //             label: {
                    //                 // 标签显示位置
                    //                 show: false,
                    //                 position: 'top' // insideTop 或者横向的 insideLeft
                    //             }
                    //         }
                    //     },
                    //     z: 0
                    // }
                ]
            }
        };
    },
    mounted() {
        const me = this;
        me.initMyChart();
    },
    methods: {
        initMyChart() {
            const me = this;
            const chartDom = me.$refs.main;
            const myChart = echarts.init(chartDom);
            myChart.setOption(me.option5);
        }
    }
};
</script>