echart 柱状图添加svg小图标

最新推荐文章于 2024-07-02 16:09:07 发布

杨大大28

最新推荐文章于 2024-07-02 16:09:07 发布

阅读量2k

点赞数

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

本文链接：https://blog.csdn.net/popstarqq/article/details/122436725

版权

前端专栏收录该内容

94 篇文章 16 订阅

订阅专栏

1 创建箭头符号及数据:

        function drawTriangleSymbol(data){
            // 绘制三角形
            let triangle = 'path://M0 0 L2 0 L1 3 Z'
            let result = data.map((v) => ({   
                value: v,
                symbol: `${triangle}`, 
                itemStyle: {
                    normal: {
                        color: '#FFFFFF'
                    }
                },
                symbolPosition: 'end',  // 在数据结尾显示
                symbolSize: [7, 7],     // 「大小」
                symbolOffset: [5, -15], //「偏移量」
            }))
            return result
        }

这里的svg path可以是其他任意的路径，可自行尝试。

2 添加一个series对象

                // 小箭头
                {
                    z: 6,
                    type: "pictorialBar",
                    data: seriesData0
                }

3 全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>柱形图箭头</title>
    <script src="echarts.min.js"></script>
    <style>

    </style>
</head>
<body>
   <div id="chart" style="width:400px;height:200px;background: #3f394a;"></div>
    <script>
        const chart = echarts.init(document.getElementById("chart"));
        let list = [{
                name: '总数',
                value: 34
            }
            , {
                name: '在线',
                value:  12
            }, {
                name: '离线',
                value:  22
            }
        ];
        let yName = list.map((item) => item.name);
        let xData = list.map((item) => item.value);
        let barWidth = 24;
        let seriesData0=drawTriangleSymbol(xData)
        let option = {
            xAxis: {
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            grid: {
                containLabel: true,
                left: 20,
                top: 0,
                right: 50,
                bottom: 0
            },
            yAxis: [{
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 16,
                        color: '#90DBFF'
                    },
                    formatter: function(value,index) {
                            var str = ''
                            str = '{num|' + value + '}'
                            return str;
                    },
                    rich:{
                        num:{
                            color: '#fff',
                            width: 92,
                            height: 28,
                            fontSize:14,
                            align: 'center',
                            backgroundColor: {
                            image: './name.png'
                            }
                        }
                    
                    }
                },
                data: yName,
            }],
            series: [
                { //内
                    type: 'bar',
                    barWidth:18,
                    legendHoverLink: false,
                    symbolRepeat: true,
           
                    silent: true,
                    itemStyle: {
                        color: function(params){
                        let basic={
                            type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0
                            }
                            if(params.dataIndex===0){
                                basic=Object.assign(basic,{
                                    colorStops: [{
                                        offset: 0,
                                        color: '#0086FF' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#39EAEC' // 100% 处的颜色
                                    }]
                                })
                            }
                        if(params.dataIndex===1){
                                basic=Object.assign(basic,{
                                    colorStops: [{
                                        offset: 0,
                                        color: '#00FF72' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#39EFA5' // 100% 处的颜色
                                    }]
                                })
                            }
                            if(params.dataIndex===2){
                                basic=Object.assign(basic,{
                                    colorStops: [{
                                        offset: 0,
                                        color: '#FFF400 ' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#FF962C' // 100% 处的颜色
                                    }]
                                })
                            }
                            return basic
                        
                        }
                    },
                    data: list,
                    z:1,
                    animationEasing: 'elasticOut'
                },
                    
                { // 背景
                    type: 'pictorialBar',
                    animationDuration: 0,
                    symbolRepeat: 'fixed',
                    symbolMargin: '20%',
                    symbol: 'roundRect',
                    symbolSize: [4, barWidth],
                    itemStyle: {
                        normal: {
                            color: '#12272A',

                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            offset: [0, 2],
                            distance: 30,
                            textStyle: {
                                color: '#7AF8FF',
                                fontSize: 14,
                            },
                            formatter: function(a, b) {
                                return `${a.value}`
                            }
                        },

                    },
                    data: xData,
                    z: 0,
                    animationEasing: 'elasticOut'
                },
                { //分隔
                    type: 'pictorialBar',
                    itemStyle: {
                        color: '#000'
                    },
                    symbolRepeat: 'fixed',
                    symbolMargin: 2,
                    symbol: 'roundRect',
                    symbolClip: true,
                    symbolSize: [2, barWidth],
                    symbolPosition: 'start',
                    symbolOffset: [0, 0],
                    data: list,
                    z: 2,
                    animationEasing: 'elasticOut'
                },
                // 小箭头
                {
                    z: 6,
                    type: "pictorialBar",
                    data: seriesData0
                }
            ]
        };
        chart.setOption(option);
        function drawTriangleSymbol(data){
            // 绘制三角形
            let triangle = 'path://M0 0 L2 0 L1 3 Z'
            let result = data.map((v) => ({   
                value: v,
                symbol: `${triangle}`, 
                itemStyle: {
                    normal: {
                        color: '#FFFFFF'
                    }
                },
                symbolPosition: 'end',  // 在数据结尾显示
                symbolSize: [7, 7],     // 「大小」
                symbolOffset: [5, -15], //「偏移量」
            }))
            return result
        }
          
        
    </script>
</body>

杨大大28

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
echart 柱状图添加svg小图标

1 创建箭头符号及数据: function drawTriangleSymbol(data){ // 绘制三角形 let triangle = 'path://M0 0 L2 0 L1 3 Z' let result = data.map((v) => ({ value: v, symbol: `${triangle}`, ..
复制链接

扫一扫