echarts通用组件封装，自取自用

功能实现

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