echart 柱状图添加svg小图标

最新推荐文章于 2025-02-25 16:14:15 发布

原创

最新推荐文章于 2025-02-25 16:14:15 发布 · 2.4k 阅读

标签

#echarts #前端

收录于

本文介绍如何使用 ECharts 在柱状图中添加自定义箭头符号。通过 JavaScript 实现动态生成箭头，并调整其位置与样式，适用于数据展示与可视化项目。

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: