type：pictorialBar 的条形图

import React from 'react';
import { isNotEmpty } from 'utils/util'; // 封装的公用方法
import LineBar from 'components/common/echarts/LineBar'; // 引入echarts
import NoData from 'common/noData/noData';
import EchartBase from 'components/common/echarts/base/EchartBase';

export default function ({ data, yAxis }) {
    const width = document.querySelector('body').clientWidth;
    let maxz = Math.max(...data);
    const getSymbolData = (data) => {
        let arr = [];
        for (var i = 0; i < data.length; i++) {
            arr.push({
                value: data[i],
                symbolPosition: 'end'
            });
        }
        return arr;
    };
    const bgData = (data) => {
        let arr = [];
        let max = Math.max(...data);
        let maxdata = max + max / 20;
        for (var i = 0; i < data.length; i++) {
            arr.push(maxdata);
        }
        return arr;
    };
    const option = {
        title: {
            show: false
        },
        grid: {
            top: 10,
            left: 0,
            right: maxz > 1000 ? '7%' : maxz > 100 ? '5%' : '1%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        yAxis: [
            {
                type: 'category',
                data: yAxis,
                axisTick: {
                    length: 5,
                    show: true,
                    alignWithLabel: true,
                    lineStyle: {
                        color: '#D1DCE6'
                    },
                    axisLabel: {
                        distance: 20
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#E9ECEF',
                        type: 'dashed'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#E9ECEF'
                    }
                },
                axisLabel: {
                    verticalAlign: 'top',
                    color: '#9CB2CD',
                    fontSize: 12,
                    interval: 0,
                    margin: 12,
                    borderDashOffset: 32,
                    lineHeight: 0,
                    formatter: function (val) {
                        var strs = val.split(''); // 字符串数组
                        var str = '';
                        for (var i = 0, s; (s = strs[i++]); ) {
                            // 遍历字符串数组
                            str += s;
                            if (!(i % 10)) {
                                str += '\n'; // 按需要求余
                            }
                        }
                        return str;
                    }
                }
            }
        ],
        series: [
            {
                type: 'pictorialBar',
                symbol: 'circle', // 细条状的圆坨
                symbolSize: [8, 8],
                symbolOffset: [29, -4],
                z: 12,
                itemStyle: {
                    normal: {
                        color: '#00C0CD'
                    }
                },
                data: getSymbolData(data)
            },
            {
                data: data,
                z: 24,
                type: 'pictorialBar',
                barCategoryGap: '5%',
                boundaryGap: true,
                barWidth: 4, // 柱图宽度， 中间的细条状
                symbol: 'rect',
                symbolSize: ['100%', '100%'],
                symbolOffset: [20, 6], // 左右， 上下
                label: {
                    normal: {
                        show: false
                    }
                },
                emphasis: {
                    itemStyle: {
                        borderWidth: 0
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#00C0CD',
                        label: {
                            show: true,
                            textStyle: {
                                fontSize: '30px'
                            }
                        }
                    }
                }
            },
            {
                data: bgData(data),
                z: 1,
                type: 'pictorialBar',
                barCategoryGap: '5%',
                boundaryGap: true,
                barWidth: 16, // 柱图宽度,  背景阴影
                symbol: 'rect',
                symbolSize: ['100%', '100%'],
                symbolOffset: [10, 0], // 左右， 上下
                stack: '2',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                label: {
                    normal: {
                        formatter: (params) => {
                            return data[params.dataIndex];
                        },
                        show: true,
                        fontSize: 14,
                        position: 'right',
                        color: '#38446C',
                        fontWeight: 'Bold',
                        fontFamily: 'DINCondensed-Bold, DINCondensed'
                    }
                },
                // emphasis: {
                //     itemStyle: {
                //         color: '#E8F9FA'
                //     }
                // },
                itemStyle: {
                    normal: {
                        color: '#F7FAFD',
                        label: {
                            distance: 20,
                            show: false,
                            textStyle: {
                                fontSize: '30px'
                            }
                        }
                    }
                }
            }
        ]
    };

    return isNotEmpty(data) ? (
        <div style={{ height: data.length * 50 + 'px' }}>
            <EchartBase option={option} style={{ height: '100%', cursor: 'pointer' }} />
        </div>
    ) : (
        <NoData />
    );
}

效果图：