Echarts柱状图横向展示，左侧类名区别显示，自定义tooltip效果

文章目录 效果图具体代码及讲解准备数据配置颜色项，方便后续使用图表具体实现

效果图

一般状态显示：

鼠标悬停时效果：

具体代码及讲解 准备数据

var valdata = [10, 15, 25, 55]
var titlename = [
    '高风险',
    '中风险',
    '较低风险',
    '低风险'
]

配置颜色项，方便后续使用

var yhColor = [
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
            offset: 0,
            color: '#4D0000'
        },
        {
            offset: 1,
            color: '#FF3535'
        }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
            offset: 0,
            color: '#FFBF2C'
        },
        {
            offset: 1,
            color: '#FFBF2C'
        }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
            offset: 0,
            color: '#00254D'
        },
        {
            offset: 1,
            color: '#0090FF'
        }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
            offset: 0,
            color: '#0E4D00'
        },
        {
            offset: 1,
            color: '#67FF9D'
        }
    ])
]

图表具体实现

export function getComsiveRiskOptionnew() {
    return {
        grid: {
            left: '18%',//因为左侧字数较多，调宽一下
            right: '5%',
            bottom: '0%',
            top: '10%',
            containLabel: false
        },
        //鼠标悬停时的工具框样式定义
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function (params) {
                return (
                    params[0].name +
                    '
' +
                    "" +
                    params[0].seriesName +
                    ' : ' +
                    Number(
                        (params[0].value.toFixed(4))
                    ).toLocaleString() + 'km' +
                    ' 
'
                )
            }
        },
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: titlename
            },
        ],
        series: [
            {
                name: '长度',
                type: 'bar',
                zlevel: 1,
                itemStyle: {
                    normal: {
                        position: 'center',
                        barBorderRadius: 0,
                        //数据条颜色设置
                        color:
                            function (params) {
                                var num = yhColor.length
                                return yhColor[params.dataIndex % num]
                            }
                    }
                },
                barWidth: 8,
                data: valdata,
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                            lineHeight: -20,
                        },
                        //左侧效果设置，暂时没找到好的方法让字体两端对齐，所以手动加了空格，后续有好的方法再改
                        formatter: function (data) {
                            var result = ''
                            result += titlename[data.dataIndex]
                            if (titlename[data.dataIndex] === '高风险') {
                                return '{a|}\n' + '   ' + '高' + ' '+'风'+ ' '+'险'+ ' '
                            } else if (titlename[data.dataIndex] === '中风险') {
                                return '{b|}\n' + '   ' +  '中' + ' '+'风'+ ' '+'险'+ ' '
                            } else if (titlename[data.dataIndex] === '较低风险') {
                                return '{c|}\n' + '   ' +  result
                            } else if (titlename[data.dataIndex] === '低风险') {
                                return '{d|}\n' + '   ' +  '低' + ' '+'风'+ ' '+'险'+ ' '
                            }
                        },
                        //左侧小圆点颜色配置
                        rich: {
                            a: {
                                width: 5,
                                height: 5,
                                backgroundColor: '#D75151',
                                shadowColor: '#FF3535',
                                shadowBlur: 8,
                                shadowOffsetY: 1,
                                shadowOffsetX: 1,
                                borderRadius: 100
                            },
                            b: {
                                width: 5,
                                height: 5,
                                backgroundColor: '#EFBE54',
                                shadowColor: '#FFBF2C',
                                shadowBlur: 8,
                                shadowOffsetY: 1,
                                shadowOffsetX: 1,
                                borderRadius: 100
                            },
                            c: {
                                width: 5,
                                height: 5,
                                backgroundColor: '#60A0FF',
                                shadowColor: '#0090FF',
                                shadowBlur: 8,
                                shadowOffsetY: 1,
                                shadowOffsetX: 1,
                                borderRadius: 100
                            },
                            d: {
                                width: 5,
                                height: 5,
                                backgroundColor: '#67FF9D',
                                shadowColor: '#67FF9D',
                                shadowBlur: 8,
                                shadowOffsetY: 1,
                                shadowOffsetX: 1,
                                borderRadius: 100
                            },
                        }
                    }
                }
            },
            //背景阴影设置
            {
                name: '背景',
                type: 'bar',
                barWidth: '25%',
                barGap: '-100%',
                data: [100, 100, 100, 100],
                itemStyle: {
                    normal: {
                        color: 'rgba(140, 140, 140, 0.4)',
                        barBorderRadius: 0
                    }
                }
            },
            //背景外框设置
            {
                name: '外框',
                type: 'bar',
                barGap: '-135%',
                barWidth: '42%',
                data: [105, 105, 105, 105],
                itemStyle: {
                    normal: {
                        color: 'rgba(37,48,67,0)',
                        borderWidth: 0.3,
                        borderColor: 'rgba(137,148,167,0.8)',
                        barBorderRadius: 0
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            fontSize: 14,
                            color: '#fff',
                            lineHeight: -20
                        },
                        //右侧数据展示
                        formatter: function (data) {
                            var result = ''
                            result += valdata[data.dataIndex]
                            if (data.dataIndex === 0) {
                                return '{a|' + result + 'km' + '}'
                            } else if (data.dataIndex === 1) {
                                return '{b|' + result + 'km' + '}'
                            } else {
                                return result + 'km'
                            }
                        },
                        //右侧数据颜色配置项
                        rich: {
                            a: {
                                color: 'rgba(255,91,92)',
                                fontSize: 14,
                                fontWeight: 600
                            },
                            b: {
                                color: '#FDE266',
                                fontSize: 14,
                                fontWeight: 600
                            }
                        }
                    }
                }
            }
        ]
    }
}