功能实现
1、封装了echarts通用组件
2、解决了屏幕自适应、echarts自适应等基础功能
3、提供了外部的默认的全屏,导出图片,导出数据,翻转x轴等功能
源代码
<template>
<div class='chart'>
<div class="tool-box">
<div class="save-excel-buttom" v-if="isSaveExcel" @click="SaveExcelFn">
<span class="text">下载</span>
<svg t="1703663976992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4238" width="20" height="20">
<path
d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z"
fill="currentColor" p-id="4239"></path>
</svg>
</div>
<div class="save-img-buttom" v-if="isSaveImgChart" @click="saveImgFn('png')">
<span class="text">保存</span>
<svg t="1703644717144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="5191" width="20" height="20">
<path
d="M831.792397 82.404802 191.548594 82.404802c-60.676941 0-110.042255 49.364291-110.042255 110.042255l0 640.245849c0 60.677964 49.364291 110.042255 110.042255 110.042255l640.244826 0c60.677964 0 110.042255-49.364291 110.042255-110.042255L941.835675 192.447057C941.834652 131.769093 892.470361 82.404802 831.792397 82.404802zM191.548594 122.420167l640.244826 0c38.612413 0 70.02689 31.414477 70.02689 70.02689l0 134.349871c-144.759965 4.953825-280.06151 63.59234-382.864898 166.396751-48.28061 48.28061-86.814228 103.732549-114.628714 163.962306-80.588433-68.744687-197.638289-73.051783-282.803971-12.938684L121.522728 192.447057C121.521704 153.834644 152.935158 122.420167 191.548594 122.420167zM121.521704 832.691883l0-136.601144c74.040297-72.025407 192.529945-71.925123 266.451538 0.301875-23.496134 62.998823-35.762505 130.383536-35.762505 199.672622 0 2.336208 0.420579 4.569062 1.157359 6.652514L191.548594 902.717749C152.935158 902.718773 121.521704 871.304296 121.521704 832.691883zM831.792397 902.718773 391.068743 902.718773c0.735757-2.084475 1.157359-4.317329 1.157359-6.652514 0-141.581576 55.054897-274.608312 155.023726-374.578164 95.245248-95.245248 220.499973-149.720953 354.570481-154.655336l0 465.860147C901.819287 871.304296 870.40481 902.718773 831.792397 902.718773z"
fill="currentColor" p-id="5192"></path>
<path
d="M349.471346 477.533001c75.04723 0 136.102794-61.054541 136.102794-136.101771s-61.055564-136.102794-136.102794-136.102794-136.102794 61.055564-136.102794 136.102794S274.424116 477.533001 349.471346 477.533001zM349.471346 245.343801c52.982702 0 96.087429 43.104727 96.087429 96.087429 0 52.982702-43.104727 96.087429-96.087429 96.087429-52.982702 0-96.087429-43.104727-96.087429-96.087429C253.383918 288.448528 296.488645 245.343801 349.471346 245.343801z"
fill="currentColor" p-id="5193"></path>
</svg>
</div>
<div class="flip-shaft-buttom" v-if="isFlipChart" @click="flipshaftFn">
<span class="text">翻转</span>
<svg t="1701410576983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4281" width="20" height="20">
<path
d="M415.936 32h235.008a192 192 0 0 1 192 192v325.504l103.808-103.808 45.248 45.248-180.992 181.056-181.12-180.992 45.312-45.248 103.68 103.68V224a128 128 0 0 0-128-128H416v-64z"
fill="currentColor" p-id="4282"></path>
<path
d="M563.968 960.64c-22.528 19.52-51.84 31.36-83.968 31.36h-320a127.488 127.488 0 0 1-98.368-46.08A127.488 127.488 0 0 1 32 864v-512a127.68 127.68 0 0 1 128-128h320a128 128 0 0 1 128 128v512c0 38.528-17.088 73.216-44.032 96.64zM544 352a64 64 0 0 0-64-64h-320a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h320a64 64 0 0 0 64-64v-512z"
fill="currentColor" p-id="4283"></path>
</svg>
</div>
<div class="full-screen-buttom" v-if="isFullChart" @click="fullChart">
<span class="text">全屏</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
class="bi bi-aspect-ratio" viewBox="0 0 16 16">
<path
d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z" />
<path
d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z" />
</svg>
</div>
</div>
<div class="chart-dom" ref="chartDom"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "chart",
props: {
//echart配置项
options: {
type: Object,
default: {},
required: true
},
//保存为excel数据
isSaveExcel: {
type: Boolean,
default: false
},
//保存的图片名称
imgName: {
type: String,
default: "echarts"
},
//保存为图片
isSaveImgChart: {
type: Boolean,
default: false
},
//全屏
isFullChart: {
type: Boolean,
default: false
},
//翻转y轴
isFlipChart: {
type: Boolean,
default: false
},
//图标颜色
iconColor: {
type: String,
default: '#000'
},
//激活的颜色
activeIconColor: {
type: String,
default: '#409EFF'
}
},
watch: {
options: {
handler(newValue, oldValue) {
//重绘自适应
//防止echarts盒子不存在,等待盒子渲染后的下一帧进行渲染
setTimeout(() => {
this.myChart.resize()
}, 17);
setTimeout(() => {
this.myChart.setOption(newValue, true)
}, 34);
},
deep: true,
immediate: true
}
},
data() {
this.myChart = null;
return {
isFlip: false
}
},
methods: {
//重绘echarts
resizeHandler() {
this.myChart.resize()
},
//全屏
fullChart() {
// 注:yourEchartsId: 你的图表id
const element = document.querySelector('.chart')
if (element.requestFullScreen) { // HTML W3C 提议
element.requestFullScreen();
} else if (element.msRequestFullscreen) { // IE11
element.msRequestFullScreen();
} else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
element.mozRequestFullScreen();
}
// 退出全屏
if (element.requestFullScreen) {
document.exitFullscreen();
} else if (element.msRequestFullScreen) {
document.msExitFullscreen();
} else if (element.webkitRequestFullScreen) {
document.webkitCancelFullScreen();
} else if (element.mozRequestFullScreen) {
document.mozCancelFullScreen();
}
},
//翻转
flipshaftFn() {
this.isFlip = !this.isFlip
if (this.isFlip) {
this.options.xAxis.forEach((xAxisItem) => {
xAxisItem.position = 'top'
})
this.options.yAxis.forEach((yAxisItem) => {
yAxisItem.inverse = true
})
} else {
this.options.xAxis.forEach((xAxisItem) => {
xAxisItem.position = 'bottom'
})
this.options.yAxis.forEach((yAxisItem) => {
yAxisItem.inverse = false
})
}
},
//保存为图片
saveImgFn(type = 'png') {
//type可为png
const base = this.myChart.getDataURL({
type: type,
pixelRatio: 5,
backgroundColor: '#fff'
});
const a = document.createElement("a");//创建一个<a></a>标签
a.href = base; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
a.download = `${this.imgName}.${type}`; //设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
a.remove(); // 一次性的,用完就删除a标签
},
//保存数据
SaveExcelFn() {
//需要自己定义导出逻辑
this.$emit('saveData', true)
},
},
mounted() {
this.myChart = echarts.init(this.$refs.chartDom)
// this.myChart.setOption(this.options, true)
window.addEventListener('resize', this.resizeHandler)
},
beforeUnmount() {
this.myChart.dispose();
window.removeEventListener('resize', this.resizeHandler)
},
}
</script>
<style scoped>
.chart {
height: 100%;
width: 100%;
position: relative;
}
.tool-box {
position: absolute;
right: 20px;
top: 20px;
color: v-bind(iconColor);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
}
.save-excel-buttom {
margin: 0 10px;
cursor: pointer;
color: v-bind(iconColor);
position: relative;
}
.save-excel-buttom .text {
display: block;
position: absolute;
bottom: -14px;
font-size: 12px;
width: 100%;
text-align: center;
text-wrap: nowrap;
display: none;
}
.save-excel-buttom:hover .text {
display: block;
color: v-bind(activeIconColor);
}
.save-img-buttom {
margin: 0 10px;
cursor: pointer;
color: v-bind(iconColor);
position: relative;
}
.save-img-buttom .text {
display: block;
position: absolute;
bottom: -14px;
font-size: 12px;
width: 100%;
text-align: center;
text-wrap: nowrap;
display: none;
}
.save-img-buttom:hover .text {
display: block;
color: v-bind(activeIconColor);
}
.flip-shaft-buttom {
margin: 0 10px;
cursor: pointer;
color: v-bind(iconColor);
position: relative;
}
.flip-shaft-buttom .text {
display: block;
position: absolute;
bottom: -14px;
font-size: 12px;
width: 100%;
text-align: center;
text-wrap: nowrap;
display: none;
}
.flip-shaft-buttom:hover .text {
display: block;
color: v-bind(activeIconColor);
}
.full-screen-buttom {
margin: 0 10px;
cursor: pointer;
/* color: v-bind(iconColor); */
color: #000;
position: relative;
}
.full-screen-buttom .text {
display: block;
position: absolute;
bottom: -14px;
font-size: 12px;
width: 100%;
text-align: center;
text-wrap: nowrap;
display: none;
}
.full-screen-buttom:hover .text {
display: block;
color: v-bind(activeIconColor);
}
.chart-dom {
width: 100%;
height: 100%;
}
svg {
color: v-bind(iconColor);
}
svg:hover {
color: v-bind(activeIconColor);
}
</style>
配置项
参数名称 | 参数类型 | 参数说明 | 默认值 | 可选参数 |
options | object | echarts内容配置 | {} | 该参数为必传配置,用于渲染echarts的内容 |
isSaveExcel | Boolean | 是否显示导出表格按钮,需要自行定义导出逻辑,配合事件saveData,可导出数据 | false | |
isSaveImgChart | Boolean | 是否显示导出图片按钮 | false | |
imgName | String | 导出的图片名称 | echarts | |
isFullChart | Boolean | 是否显示全屏按钮 | false | |
isFlipChart | Boolean | 是否显示翻转y轴和x轴按钮 | false | |
iconColor | String | 图标颜色 | #000 | |
activeIconColor | String | 图标选中和:hover的颜色 | #409EFF |