【Vue+Echarts】Vue中使用Echarts（二）——将echarts封装成组件

系统要使用echarts，而且是频繁的使用，如果通过【一】这篇中所使用，首先造成的问题就是代码不美观，且冗余太多，因此，如果可以将Echarts封装成组件，那么在调用图表时，通过传递图表参数即可生成图表。

Vue使用：【props】用来接收父组件传递的参数，同时给props设置一个默认值，在没有传递数据的时候，也会显示图表。

实现步骤：

charts.vue

添加watch监听option的变化，如果有新的option，图标刷新。

<template>
  <div :id="id" :style="style"></div>
</template>

<script>
export default {
  name: 'charts',
  data () {
    return {
      chart: ''
    }
  },
  props: {
  	id: {
  	  	type: String
  	},
  	width: {
  		type: String,
  		default: '100%'
  	},
  	height: {
  		type: String,
  		default: '100%'
  	},
  	option: {
  		type: Object,
  		default() {
  			return {
	  			title: {
	                text: 'ECharts 入门示例'
	            },
	            tooltip: {},
	            legend: {
	                data:['销量']
	            },
	            xAxis: {
			        type: 'category',
			        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: [820, 932, 901, 934, 1290, 1330, 1320],
			        type: 'line'
			    }]
  			}
  		}
  	}
  },
  computed: {
  	style() {
  		return {
  			width: this.width,
  			height: this.height
  		}
  	}
  },
  watch: {
  	option: {
  		handler(newVal, oldVal) {
  			if (this.chart) {
  				this.chart.setOption(newVal)
  			} else {
  				this.init();
  			}
  		},
  		deep: true
  	}
  },
  mounted() {
  	this.init()
  },
  methods: {
  	init() {
  		this.chart = this.$echarts.init(document.getElementById(this.id))
  		this.chart.setOption(this.option)
  		window.addEventListener("resize", this.chart.resize);
  	}
  }
}
</script>

父组件

其余的参数，可以根据自己需求添加

<template>
  <div>
    <chart id="demo" height="400px" :option='ChartTestData'></chart>
  </div>
</template>

<script>

//引入组件 略去

export default{

components:{
    ChartsPart
  },

    data(){
        return {
            ChartTestData:{
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [3, 2, 5, 1, 5, 6, 2],
            type: "line",
          },
        ],
      }
            }
    }
}
</script>

即完成对Echarts的组件封装。

注：子组件可以直接复制粘贴使用，父组件记得import组件