vue使用ECHarts並封裝

1. npm安裝echarts npm install echarts -S , 也可以 選擇需要的模塊，在線定製下載
2. 在 assets 中創建echarts文件夾放echarts-plug.js

開始封裝
—————————————————————————————————————————————
echarts-plug.js

import echarts from "echarts";

let echarts = {
	// 折線圖
	line:function(id){
		var myChart = echarts.init(document.getElementById(id));
		var option = {
			// 折線圖options配置
		};
		
		myChart.clear();
		myChart.setOption(option, true);
	},
	// 柱狀圖
	column:function(id){
		var myChart = echarts.init(document.getElementById(id));
		var option = {
			// 柱狀圖options配置
		};
		
		myChart.clear();
		myChart.setOption(option, true);
	},
}

export default echarts;

開始使用
—————————————————————————————————————————————
demo.vue

<template>
	<!-- 這個div需要有固定的寬高，否則無效 -->
	<div id="line"></div> 
</template>

import echarts from '@/assets/js/echarts/echarts-plug.js'; // 路徑改成自己的

mounted() {
	echarts.line('line') // 初始化折線圖
},

簡單封裝，有問題歡迎評論區討論