Echarts柱状图和折线图demo

第一次简单使用echarts图表，因此在博客记录一下

柱状图

<template>
	<div>
		<div class="page-all">
			<div id="orderbox" style="width:600px;height:400px;"></div>
		</div>		
	</div>
</template>

<script>
	export default {
		mounted() {
			this.getOrderCharts()
		},
		methods: {
			// 订单金额柱状图
			getOrderCharts() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById("orderbox"));
				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '单位：元',
						textStyle: {
							color: '#999999',
							fontSize: 14
						},
						left: 20
					},
					legend: {
						data: ['销量'],
						right: '10%'
					},
					grid: {},
					xAxis: {
						data: ["1月份", "2月份", "3月份", "4月份", "5月份", "6月份", "7月份", "8月份"],
						// 不显示刻度
						axisTick: {
							show: false
						},
						// 不显示横线
						axisLine: {
							show: false
						}
					},
					yAxis: {
						show: false
					},
					series: [{
						name: '销量',
						type: 'bar',
						data: [4111, 6280, 3162, 5120, 3180, 2220, 5403, 1000],
						// 是否展示背景
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						},
						// 是否显示数字
						label: {
							show: true,
							position: 'top',
						},
						// 柱状图的宽度
						barWidth: '30px'
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},
		}
	};
</script>

效果图：

折线图

<template>
	<div>
		<div class="page-all">
			<div id="orderbox" style="width: 600px;height: 400px;"></div>
		</div>		
	</div>
</template>

<script>
	export default {
		mounted() {
			this.getStudentCharts()
		},
		methods: {
			// 学生数量折线图
			getStudentCharts() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById("studentbox"));
				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '单位：元',
						textStyle: {
							color: '#999999',
							fontSize: 14
						},
						left: 20
					},
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						data: ['学生数量'],
						right: '10%'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						splitLine: {
							show: true
						},
						data: ['6月份', '8月份', '10月份', '12月份', '2月份', '4月份']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '学生数量',
						data: [18000, 22932, 19901, 33934, 41290, 21330],
						type: 'line',
						areaStyle: {
							color: '#00D0B0',
							opacity: '0.2'
						},
						lineStyle: {
							color: '#00D0B0',
						},
						symbolSize: 4,
						smooth: true,
						itemStyle: {
							normal: {
								color: '#00D0B0', //拐点颜色
							},
						},
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},
		}
	};
</script>

效果图