Vue 集成echarts 图表组件分析

哈哈 阅读:170 2021-03-31 20:59:06 评论:0

第一步:本项目本地安装echarts

cnpm install echarts -D

第二步:全局配置:项目/main.js 文件

// 引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

第三步:相关页面引用echarts,进行页面初始化

<!-- 登录记录图表 --> 
<template> 
	<transition enter-active-class="animated bounceInUp"> 
		<section class="record-chart"> 
			<el-title-header :title="$route.meta.title"></el-title-header> 
 
			<div class="chart" style="height: 500px;"></div> 
		</section> 
	</transition> 
</template> 
 
<script> 
export default { 
	name: 'recordChart', 
	methods: { 
		// 初始化echart 
		initChart () { 
			var myChart = this.$echarts.init(document.querySelector('.chart')); 
			myChart.setOption({ 
			    color: ['#3398DB'], 
			    tooltip : { 
			        trigger: 'axis', 
			        axisPointer : {            // 坐标轴指示器,坐标轴触发有效 
			            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow' 
			        } 
			    }, 
			    grid: { 
			        left: '3%', 
			        right: '4%', 
			        bottom: '3%', 
			        containLabel: true 
			    }, 
			    xAxis : [ 
			        { 
			            type : 'category', 
			            data : ['08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13'], 
			            axisTick: { 
			                alignWithLabel: true 
			            } 
			        } 
			    ], 
			    yAxis : [ 
			        { 
			            type : 'value' 
			        } 
			    ], 
			    series : [ 
			        { 
			            name:'总共', 
			            type:'bar', 
			            barWidth: '60%', 
			            data:[10, 52, 200, 334, 390, 330, 220] 
			        } 
			    ] 
			}); 
		} 
	}, 
	mounted () { 
		this.$nextTick(() => { 
			this.initChart(); 
		}) 
	} 
} 
</script> 
 
 
 
 
 
 
 
 
 

效果展示:

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号