vue - ECharts

• 安裝

npm install echarts --save

 

• App.vue

<template>
	<div>
		<figure class="css-echarts" id="echarts_bar"></figure>

		<figure class="css-echarts" id="echarts_pie"></figure>

		<figure class="css-echarts" id="echarts_line"></figure>
	</div>
</template>

<style lang="sass">
	@import "assets/index.scss"
</style>

<script>
	import index from './assets/index';
	export default index;
</script>

• assets/index.scss, 注意固定高度

.css-echarts {
	height: 300px;
	margin-bottom: 50px;
	background: #eee;
}

• assets/index.js

// import * as echarts from 'echarts';

// 按需引入
	// 主模塊
import * as echarts from 'echarts/lib/echarts';

	// 柱狀圖
import 'echarts/lib/chart/bar';

	// 餅狀圖
import 'echarts/lib/chart/pie';

	// 折線圖
import 'echarts/lib/chart/line';

	// 提示框
import 'echarts/lib/component/tooltip';

	// 標題
import 'echarts/lib/component/title';

	// 工具箱
import 'echarts/lib/component/toolbox';

export default {
	name: 'index',
	data () {
		return {
			bar_data: [
				['nameA', 11, 22, 33],
				['nameB', 44, 55],
				['nameC', 33, 11]
			],

			pie_data: [
				{name: 'a', value: 1},
				{name: 'b', value: 2},
				{name: 'c', value: 3},
				{name: 'd', value: 4}
			],

			line_data: [
				[0, 0],
				[1, 2],
				[2, 1],
				[3, 2]
			]
		}
	},
	mounted () {
		this.getEchartsBar();
		this.getEchartsPie();
		this.getEchartsLine();
	},
	methods: {
		getEchartsBar () {
			const echartsBar = echarts.init(echarts_bar);

			echartsBar.showLoading(); // loading

			echartsBar.setOption({
				title: {
					text: '柱狀圖',
					x: 'center'
				},
				tooltip: {},
				legend: {},
				yAxis: {},
				xAxis: {
					type: 'category' // 聲明x軸爲 類目軸
				},
				series: [ // "多軸數據"的展示數
					{type: 'bar'},
					{type: 'bar'}
				],
				dataset: {
					dimensions: [null, 'tipA', 'tipB', 'tipC'], // "多軸數據"對應提示名
					source: this.bar_data // [類目名, 該類目對應"多軸數據"]
				}
			});

			setTimeout(() => echartsBar.hideLoading(), 50); // hide loading
		},

		getEchartsPie () {
			echarts.init(echarts_pie).setOption({
				title: {
					text: '餅狀圖'
				},
				roseType: 'angle', // 南丁格爾圖
				series: [{
					type: 'pie',
					data: this.pie_data
				}]
			});
		},

		getEchartsLine () {
			echarts.init(echarts_line).setOption({
				title: {
					text: '折線圖'
				},
				tooltip: {},
				toolbox: {
					feature: {
						dataView: {},
						saveAsImage: {
							pixelRatio: 2
						},
						restore: {}
					}
				},
				xAxis: {},
				yAxis: {},
				series: [{
					type: 'line',
					smooth: true, // 曲線
					data: this.line_data
				}]
			});
		}
	}
}

 

• 參考

https://echarts.apache.org/zh/tutorial.html