Vue-echarts的封装

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

echarts是我们项目中很常用的一个开源图表库，功能非常强大。图表类型丰富。可以满足我们日常的很多需求。在vue开发中，一般也是把echarts给封装成组件，调用方便，一起看看吧~

1、通过npm获取echarts

首先第一步要用npm安装echarts

npm install echarts --save

2、在vue项目中引入echarts

由于echarts非常的大，所以我们不全部引入，按需引入，引入主要的组件，如下：

<template>
    <div ref="chartDom"></div>
</template>

<script>
    import * as echarts from 'echarts/lib/echarts';
    import "echarts/lib/component/legend";
    import "echarts/lib/component/legendScroll";
    import "echarts/lib/component/graphic";
    import "echarts/lib/component/tooltip";
    import "echarts/lib/component/title";
    import "echarts/lib/component/markLine";
    import "echarts/lib/component/markPoint";
    import "echarts/lib/chart/bar";
    import "echarts/lib/chart/line";
    import "echarts/lib/chart/pie";
    import "echarts/lib/chart/gauge";
    import 'echarts/lib/component/grid';
    import 'echarts/lib/component/dataZoom';
    import debounce from "lodash/debounce";
    import { addListener, removeListener } from "resize-detector";
    export default {
        props: {
            option: {
                type: Object,
                default: () => {}
            }
        },
        watch: {
            option(val) {
                this.chart.setOption(val);
            }
        },
        created() {
            this.resize = debounce(this.resize, 300);
        },
        mounted() {
            this.renderChart();
            addListener(this.$refs.chartDom, this.resize);
        },
        beforeDestroy() {
            removeListener(this.$refs.chartDom, this.resize);
            this.chart.dispose();
            this.chart = null;
        },
        methods: {
            resize() {
                this.chart ? this.chart.resize() : "";
            },
            renderChart() {
                // 基于准备好的dom，初始化echarts实例
                this.chart = echarts.init(this.$refs.chartDom);
                this.chart.setOption(this.option);
            }
        }
    };
</script>

3、新建Echarts.vue文件

（1）在 template 中添加一个存放echarts的‘div’容器
（2）设置对应的options
（3）在后台返回数据接口中调用方法

<chart :option="lineOption" class="chart">

以折线图为例，看一下代码吧~

lineChart(allData, boyData,girlData,xAxis,type) {
    this.lineOption = {
        title: {
            textStyle:{
                color: "#484848",
                fontStyle: 14,
            },
            textAlign: 'center',
            left: '50%',
            bottom: 30
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: 50,
            containLabel: true
        },
        color: ["#5B8FF9","#61DDAA","#F6BD16"],
        tooltip: {
            show: true,
            trigger: "axis",
            confine: true,//是否将 tooltip 框限制在图表的区域内
            axisPointer: {
                type: "line",
                axis: "auto",
            },
            borderColor: "#c5d0da",
            backgroundColor: "#fff",
            borderWidth: 1,
            padding: 12,
            textStyle: {
                color: "#33414D",
                fontStyle: "normal",
                fontSize: 12,
            }
        },
        xAxis: {
            type: 'category',
            nameTextStyle: {
                color: "#8C939A"
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: { // x轴字体颜色
                color: "#484848",
                interval: 0,
                fontSize: 12,
                rotate: "35",
            },
            data: xAxis
        },
        yAxis: {
            name: '人数',
            nameTextStyle: {
                color: "#8C939A",
            },
            type: "value",
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#DADADA"
                }
            },
            axisLabel: { // y轴字体颜色
                color: "#8C939A",
                formatter:'{value}'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type:'dotted'  // 'dotted'虚线 'solid'实线
                }
            },
        },
        legend: {
            left: 30 ,
            data: ['全部', '男生', '女生'],
            icon: "circle",
            textStyle:{
                lineHeight:30,
                fontSize:14,
                padding: [4, 0, 0, 0]
            }
        },
        series: [{
            type: "line",
            name: '全部',
            data: allData
        },{
            type: "line",
            name: '男生',
            data: boyData
        },{
            type: "line",
            name: '女生',
            data: girlData
        }],
        dataZoom: [{
            type: 'slider',
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0]
        }],
    }
},

效果如下