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

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

<script>
	module.exports = {
		data() {
			return {
				
			}
		},
		methods: {
			// 刷新柱状图
			f5BarChart: function() {
				// ===========================================  定义数据 
				var x_name = '';	// new Date().getFullYear() + "年"; // x轴名称
				var y_name = "注册数量"; // y轴名称
				var dataArray = []; // 坐标X轴数据
				var valueArray = []; //  坐标Y轴数据
			
				var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
				for (var i in arr) {
					i = parseInt(i) + 1;
					dataArray.push(i + '月');
					if (i < 10) {
						i = "0" + i;
					}
					i = i + "";
					valueArray.push(sa.randomNum(100, 1000) || 0);
				}
				
				// ===========================================  开始渲染
			
				var ele = this.$refs['bar-chart'];
				var myChart = echarts.init(ele);
				var option = {
					tooltip: {
						trigger: 'axis',
						formatter: '{b}<br/> ' + y_name + '：{c}',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid:{x: 50, y: 30, x2: 25, y2: 25},	//设置canvas内部表格的内距
					toolbox: {
						show: true,
						top: 0,
						feature: {
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: {
						name: x_name,
						type: 'category',
						// axisLabel: {
						// 	'interval': 0
						// }, //强制不缩略x轴刻度,
						data: dataArray
					},
					yAxis: {
						name: y_name,
						type: 'value'
					},
					series: [{
						name: y_name,
						data: valueArray,
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'top',
								formatter: '{c}'
							}
						},
						itemStyle: {
							normal: {
								color: '#5DB1FF',
								label: {
									show: true,
									textStyle: {
										color: 'black'
									}
								}
							}
						}
					}]
				};
				myChart.setOption(option);
				window.myChartList.push(myChart);
				// window.myChartList[0] = myChart;
				// myChartList[1] = myChart;
			},
		},
		created() {
			// 刷新所有图标数据
			this.$nextTick(function() {
				this.f5BarChart();
			});
		}
	}
</script>

<style scoped>
	
</style>