美文网首页
导出并使用 SVG_Path 绘制 Echarts 象形图表

导出并使用 SVG_Path 绘制 Echarts 象形图表

作者: MercuryWang | 来源:发表于2020-03-25 10:16 被阅读0次

    以 Echarts 的官方实例为例:pictorialBar-velocity

    如果想替换其中的图形呢?

    • 替换 symbols 的代码即可

    这里重点讲一下如何获取到 SVG_Path:

    1. 将 SVG 图上传 iconfont,或在线找到适合的 icon,点击下载,然后选择复制 SVG
    2. 打开一个 HTML 文件,粘贴:
    <svg t="1585045103126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1277" width="200" height="200">
      <path d="M486.4 630.4c-19.2 19.2-48 19.2-67.2 3.2l-137.6-131.2-32 35.2 137.6 131.2c38.4 35.2 96 35.2 134.4-3.2l281.6-297.6-35.2-32L486.4 630.4z" p-id="1278"></path>
      <path
        d="M512 51.2c-252.8 0-460.8 204.8-460.8 460.8s204.8 460.8 460.8 460.8 460.8-204.8 460.8-460.8S764.8 51.2 512 51.2zM512 924.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S739.2 924.8 512 924.8z"
        p-id="1279"
      ></path>
    </svg>
    
    3. 复制 path 标签内的 d 属性的值,如果有多个,则拼接到一起,然后粘贴替换 symbols 里面的路径,也就 path://M512 51.2c-252.8 0-460.8 204.8-460.8 460.8s204.8 460.8 460.8 460.8 460.8-204.8 460.8-460.8S764.8 51.2 512 51.2zM512 924.8c-227.2 0-412.8-185.6-412.8-412.8s185.6-412.8 412.8-412.8 412.8 185.6 412.8 412.8S739.2 924.8 512 924.8zM486.4 630.4c-19.2 19.2-48 19.2-67.2 3.2l-137.6-131.2-32 35.2 137.6 131.2c38.4 35.2 96 35.2 134.4-3.2l281.6-297.6-35.2-32L486.4 630.4z

    效果图:

    相关文章

      网友评论

          本文标题:导出并使用 SVG_Path 绘制 Echarts 象形图表

          本文链接:https://www.haomeiwen.com/subject/yqrayhtx.html