echarts改变图例颜色形状icon的用法，和svg图片信息的了解

大家好，我是你们的好朋友程序猿:铭文

先简单的说下：最近换了一个新的工作目前工作:做前端哈哈，但是后端还得搞写一些接口什么的，有压力了。这几
年的工作有压力的时候也不多哈哈，也是个新的挑战，最近改的前端比较多，一月4篇博客的计划可能会来不及了，月中
之前有2篇草稿，工作有压力了，今天晚上我看看能不能整理出来那2篇，

一.echarts图例的相关问题。

目的就是更换一个图例变成图片
官方文档： link.
官方文档详细写了怎么用这个icon和修改icon的相关信息。我们主要是把这个改变了。但是图例的修改如果修改成图片的话就会可能会出现点击缩放的问题，我也是为了解决这个问题，官方文档没给你们写具体的例子。我这边就来写一个具体的例子：
我们主要也是用了svg模型：了解： 链接官方.
来生成这些矢量图来进行图形的渲染让后我们再进行数据绑定。
大概流程：
图片生成svg图片信息：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.39 9.39"><defs><style>.cls-1{fill:#e95513;}</style></defs>
<g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1">
<path class="cls-1" d="M4.7,0A4.7,4.7,0,1,0,9.39,4.69,4.69,4.69,0,0,0,4.7,0Zm0,7.18A2.49,2.49,0,1,1,7.18,4.69,2.49,2.49,0,0,1,4.7,7.18Z"/>
</g></g>
</svg>

上面就是图片的svg信息我们可以直观的看到里面的信息，如果想看效果。可以复制下来 后缀改成svg的文件就可以看到文件信息了。
我们主要操作和拿的就是 D 这个图形的建模信息，具体的了解可以： 链接官方.
哪这个数据给 echarts 的icon 赋值上去便可：

 data: [
                    {
                        name: '数量',
                        //这里面跟的就是我们上面 svg  属性 d  的模型信息。
                        icon: 'path://M4.7,0A4.7,4.7,0,1,0,9.39,4.69,4.69,4.69,0,0,0,4.7,0Zm0,7.18A2.49,2.49,0,1,1,7.18,4.69,2.49,2.49,0,0,1,4.7,7.18Z',
                    },
                    {
                        name: '总长',
                        icon: 'path://M4.7,0A4.7,4.7,0,1,0,9.39,4.69,4.69,4.69,0,0,0,4.7,0Zm0,7.18A2.49,2.49,0,1,1,7.18,4.69,2.49,2.49,0,0,1,4.7,7.18Z',
                       
                    },
                    {
                        name: '数量',
                        icon: 'path://M4.7,0A4.7,4.7,0,1,0,9.39,4.69,4.69,4.69,0,0,0,4.7,0Zm0,7.18A2.49,2.49,0,1,1,7.18,4.69,2.48,2.48,0,0,1,4.7,7.18Z',
                       
                    }],

上面只是给图例增加了形状但是我们没有颜色区分呀，这个时候可以在平行节点上加：

series: [
                {
                    name: '数量',
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                        //圆角
                            barBorderRadius: [10, 10, 0, 0],
                           //这里就是我们的颜色 也就是上面图例模型的颜色
                            color: '#EA5514'
                        }
                    },
                    data: bridgeCountData
                }, {
                    name: '总长',
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [10, 10, 0, 0],
                            color: '#00A0E9'
                        }
                    },
                    //绑定数据
                    data:datainfo
                }

上面就是代码不懂得可以留言