pco/sp-admin/sa-view-sp/console/com-chart-3.vue

<!-- 统计图 3 -->
<template>
	<div class="echarts-div" id='line-chart' ref='line-chart'></div>
</template>

<script>
	module.exports = {
		data() {
			return {
				
			}
		},
		methods: {
			// 刷新折线图
			f5LineChart: function() {
				// ===========================================  定义数据
				var x_name = '';	// "活跃数据"; // x轴名称
				var y_name = "活跃数据"; // y轴名称
				var typeArray = ['总计登录', '新增注册'];
				var dataArray = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];	//   坐标X轴数据
				var valueArray0 = [84, 126, 262, 201, 148, 133, 86, 186, 232, 215, 326, 412];	// 	
				var valueArray1 = [284, 296, 382, 501, 348, 273, 266, 327, 412, 515, 526, 712];	// 	
			
				// ===========================================  开始渲染
			
				var myChart = echarts.init(this.$refs['line-chart']);
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					toolbox: {
						show: true,
						top: 0,
						feature: {
							saveAsImage: {
								show: true
							}
						}
					},
					grid:{x: 50, y: 30, x2: 25, y2: 25},	//设置canvas内部表格的内距
					legend: {
						data: typeArray
					},
					xAxis: {
						name: x_name,
						type: 'category',
						boundaryGap : false,
						// axisLabel: {
						// 	'interval': 0
						// }, //强制不缩略x轴刻度,
						data: dataArray
					},
					yAxis: {
						name: y_name,
						type: 'value'
					},
					series: [
						{
							name: '总计登录',
							type:'line',
							data: valueArray1,
							smooth: true,	// 曲线形式
							areaStyle: {
								normal: {
									color: 'rgba(0, 128, 0, 0.3)' //改变区域颜色
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(0, 128, 0, 0.8)', //改变折线点的颜色
								}
							},
						},
						{
							name: '新增注册',
							type:'line',
							data: valueArray0,
							smooth: true,	// 曲线形式
							areaStyle: {
								normal: {
									color: 'rgba(70, 128, 255, 0.3)' //改变区域颜色
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(70, 128, 255, 0.8)', //改变折线点的颜色
								}
							},
						},
					]
				};
				myChart.setOption(option);
				window.myChartList.push(myChart);
			},
		},
		created() {
			// 刷新所有图标数据
			this.$nextTick(function() {
				this.f5LineChart();
			});
		}
	}
</script>

<style scoped>
	
</style>