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>
原文地址:https://blog.csdn.net/cdd9527/article/details/142820652
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!