Echarts 图表导出为 SVG矢量图

正常加载 echarts 图表；

加载完成后修改思路：

1、先将图表渲染为SVG，echarts.init设置为svg渲染

this.chartDom = this.$echarts.init(this.$refs.lineChart, null, {
  renderer: "svg",
});

 2、使用blob包裹svg标签导出svg文件

// 导出SVG图片
output() {
  const content = document.querySelector("svg").outerHTML;
  const blob = new Blob([content], { type: "xml/svg" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = "test.svg";
  a.click();
},

简单示例：

<template>
  <div class="container">
    <div class="buttons">
      <button @click="output">导出SVG</button>
    </div>
    <div id="lineChart" ref="lineChart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
export default {
  name: "Echarts_SVG",
  props: {},
  data () {
    return {
      chartDom: null
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    // 导出SVG图片导出
    output() {
      const content = document.querySelector("svg").outerHTML;
      const blob = new Blob([content], { type: "xml/svg" });
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = "test.svg";
      a.click();
    },
    init() {
      this.chartDom = this.$echarts.init(this.$refs.lineChart, null, {
        renderer: "svg",
      });
      var option = {
        backgroundColor: "#081736",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: [
          {
            top: "5.5%",
            left: "60%",
            textStyle: {
              color: "#fff",
              fontSize: 20,
              fontFamily: "微软雅黑",
            },
            itemWidth: 20,
            itemHeight: 20,
            data: [
              {
                name: "1",
                icon: "rect",
              },
            ],
          },
          {
            data: [
              {
                name: "2",
                icon: "rect",
              },
            ],
            itemWidth: 30,
            itemHeight: 2,
            top: "6%",
            left: "40%",
            textStyle: {
              color: "#fff",
              // fontWeight: "normal",
              fontSize: 20,
            },
          },
        ],
        grid: {
          top: "20%",
          right: "10%",
          left: "10%",
          bottom: "20%",
        },

        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: "#fff",
              interval: 0,
              fontSize: 22,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0a3e98",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#195384",
                type: "dotted",
              },
            },
            data: ["1月", "2月", "3月", "4月", "5月"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "c",
            min: 0,
            nameTextStyle: {
              color: "#fff",
              fontSize: 22,
            },
            axisLine: {
              lineStyle: {
                color: "#0a3e98",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0a3e98",
                type: "dotted",
              },
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#fff",
                fontSize: 22,
              },
            },
          },
          {
            type: "value",
            name: "%",
            min: 0,
            nameTextStyle: {
              color: "#fff",
              fontSize: 22,
            },
            axisLine: {
              lineStyle: {
                color: "#0a3e98",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0a3e98",
                type: "dotted",
              },
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#fff",
                fontSize: 22,
              },
            },
          },
        ],
        series: [
          {
            name: "1",
            type: "pictorialBar",
            symbolSize: [20, 10],
            symbolOffset: [0, -6],
            symbolPosition: "end",
            z: 12,
            // "barWidth": "0",
            tooltip: {
              show: false,
            },
            color: "#008ed7",
            data: ["43", "19", "18", "32", "17"],
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 10],
            symbolOffset: [0, 7],
            // "barWidth": "20",
            z: 12,
            tooltip: {
              show: false,
            },
            color: "#00abff",
            data: ["43", "19", "18", "32", "17"],
          },
          {
            type: "bar",
            //silent: true,
            barWidth: "20",
            barGap: "10%", // Make series be overlap
            barCateGoryGap: "10%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "#00d7ff",
                  },
                  {
                    offset: 1,
                    color: "#00abff",
                  },
                ]),
                opacity: 1,
              },
            },
            data: ["43", "19", "18", "32", "17"],
          },
          {
            name: "2",
            type: "line",
            yAxisIndex: 1,
            // symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            smooth: true,
            symbolSize: 0,
            lineStyle: {
              normal: {
                width: 8,
                color: "#29a5d5", // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: "#071c33", //拐点颜色
                borderColor: "#2db6e9", //拐点边框颜色
                borderWidth: 2, //拐点边框大小
                // label: {
                //    show: true, //开启显示
                //    color: '#fff',
                //    position: 'top', //在上方显示
                //    formatter: function (res) {
                //       if (res.value) {
                //          return res.value
                //       } else {
                //          return 0
                //       }
                //    },
                // },
              },
            },
            // symbolSize: 8,   //设定实心点的大小
            areaStyle: {
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#29a5d530",
                    },
                    {
                      offset: 0.6,
                      color: "#29a5d520",
                    },
                    {
                      offset: 1,
                      color: "#29a5d510",
                    },
                  ],
                  false
                ),
              },
            },
            data: ["48", "24", "23", "37", "22"],
          },
        ],
      };
      option && this.chartDom.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 800px;
  .buttons {
    float: left;
    position: absolute;
    top: -30px;
    z-index: 99;
    pointer-events: all;
    cursor: pointer;
  }
}
</style>