echarts 从入门到精通（2） --- 封装一个Echarts可复用组件

本文链接：https://blog.csdn.net/weixin_43788115/article/details/103343070

上篇记录了如何使用Echarts在一个vue项目中，只是针对了单个的vue文件，要想复用，查阅资料后，有了如下写法

直接贴代码吧

<template>
    <div id="line_echarts">
        <div ref="echarts"></div>
    </div>
</template>

<script>
export default {
    name: 'lineEcharts',
    props: {
        // 配置数据
        data: {
            type: Object,
            default: () => {
                return {
                    x: [],// 横坐标
                    y: [] // 纵坐标
                }
            }
        }
    },
    // 父组件传入更新数据时，重新渲染图表展示新数据
    watch : {
        data:{
            // 数据更新后更新视图，初次绑定时不执行方法
            handler(oldVal,newVal){
                this.$nextTick(() => {
                    this.initEcharts()
                })
            },
            deep:true,
            immediate: false
        }
    },
    methods: {
        initEcharts () {
        	// 由于全局注册了echarts，在这边可以直接调用$echarts来初始化
            var myChart = this.$echarts.init(this.$refs.echarts)
            var option = {
                title: {
                    text: '统计图',
                    left: 'center',
                    top: '15'
                },
                tooltip: {
                    show: true,
                    axisPointer: {
                        type: 'cross'
                    }
                },
                xAxis: {
                    data: this.data.x,
                    axisTick : {
                    	alignWithLabel: true
                    }
                },
                yAxis: {
                    axisLabel: {
                    	formatter: '{value} %'
                    }
                },
                series: [{
                    name: '销量',
                    type: 'line',
                    data: this.data.y,
                    lineStyle : {
                        color:'#485e79'
                    },
                    itemStyle : {
                        color:'#485EFA'
                    }
                }]
            }
            myChart.setOption(option)
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.initEcharts()
        })
    }
}
</script>

<style lang="scss" scoped>
/* 保证可以撑满父组件用来包裹本组件的盒子 */
#line_echarts {
    width: 100%;
    height: 100%;
    div {
        width: 100%;
        height: 100%;
    }
}
</style>

使用时

// 将组建引入
import lineEcharts from '@/components/lineEcharts.vue'
// 注册组建
components: {
	lineEcharts
}

传入参数目前只设置了横纵坐标的值，有额外需求的话自己配置一下

// 使用组件，传入参数
<lineEcharts :data="data"/>
// data 数据
data () {
	return {
		data: {
			x: ["2019-11-21","2019-11-22","2019-11-23","2019-11-24","2019-11-25","2019-11-26"],
			y: [20,50,80,70,45,85]
		}
	}
}

页面效果

当页面中同时展示两个组件时

<div class="statistics">
	<div>
		<lineEcharts :data="data1"/>
	</div>
	<div>
		<lineEcharts :data="data2"/>
	</div>
</div>
// 数据
data () {
	return {
		data1: {
			x: ["2019-11-21","2019-11-22","2019-11-23","2019-11-24","2019-11-25","2019-11-26"],
			y: [20,50,80,70,45,85]
		},
		data2: {
			x: ["2019-10-21","2019-10-22","2019-10-23","2019-10-24","2019-10-25","2019-10-26"],
			y: [30,40,20,50,15,45]
		}
	}
}