横向柱状图（标签图片展示）

LBY_XK

于 2021-12-14 15:34:41 发布

阅读量1.3k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/LBY_XK/article/details/121928127

版权

效果图

在这里插入图片描述
HTML代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts</title>
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script src="resources/data.js"></script>
    <script src="answer/answer.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option;
        answer.initEcharts(examData);
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>
</html>

相关配置代码
resources/data.js

let answer = {
    formatRich: function(data) {
        let result = {};
        data.forEach(item => {
            result[item.i18n] = {
                color: 'transparent',
                backgroundColor: {
                    image: `nationalFlag/${item.i18n}.jpg` //标签图片路径
                },
                width: 53,
                height: 35,
                align: 'center',
            }
        })
        return result;
    },

    initEcharts: function(initData) {
        let data = initData.sort((a, b) => {
            return a.value - b.value
        });
        let rich = this.formatRich(data); //富文本
        option = {
            backgroundColor: '#000',
            grid: { // 调整柱状图在容器中的位置
                left: '4%',
                right: '10%',
                bottom: '10%',
                top: '10%',
                containLabel: true
            },
            tooltip: {// 数据提示
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                formatter: function(params) {
                    return params[0].name + ' : ' + params[0].value
                }
            },
            xAxis: { //X轴配置
                show: false,
                type: 'value'
            },
            yAxis: [{ //Y轴
                type: 'category',
                interval: 0,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    },
                    rich: rich,
                    formatter: (res) => { // 自定义文本格式
                        let result = data.find(item => {
                            if (item.name == res) {
                                return item
                            }
                        })
                        return [
                            `{${result.i18n}|${result.i18n}}` + '  ' + res
                        ].join('\n')
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: data.map(item => {
                    return item.name
                })
            }],
            series: [{
                type: 'bar',
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30, //圆角柱体
                        color: (res) => {
                            if (data.length - res.dataIndex > 3) {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 1,
                                    color: 'rgb(46,200,207,1)'
                                }, {
                                    offset: 0,
                                    color: 'rgb(46,0,207,1)'
                                }])
                            } else {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 1,
                                    color: 'rgb(255,0,0,1)'
                                }, {
                                    offset: 0,
                                    color: 'rgb(255,100,0,1)'
                                }])
                            }
                        }
                    },
                },
                barWidth: 20,
                data: data.map(item => {
                    return item.value
                })
            }],
            dataZoom: [{ //右侧缩放控件
                type: 'slider',
                orient: 'vertical',
                showDataShadow: false,
                right: 50,
            }]
        };
    }
}

数据
answer/answer.js

let examData = [
    {
        name : '中国',
        i18n: 'China',
        value : 100
    },{
        name : '英国',
        i18n: 'Britain',
        value : 40
    },{
        name : '日本',
        i18n: 'Japan',
        value : 20
    },{
        name : '印度',
        i18n: 'India',
        value : 20
    },{
        name : '法国',
        i18n: 'France',
        value : 60
    },{
        name : '韩国',
        i18n: 'Korea',
        value : 20
    },{
        name : '美国',
        i18n: 'America',
        value : 80
    }
]

图片资源自行更改替换

LBY_XK

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
横向柱状图（标签图片展示）

效果图HTML代码<!DOCTYPE html><html style="height: 100%"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫