Vue 项目中使用Apache ECharts 生成可视化图表库

不管现实多么惨不忍睹,都要持之以恒地相信,这只是黎明前短暂的黑暗而已。不要惶恐眼前的难关迈不过去,不要担心此刻的付出没有回报,别再花时间等待天降好运。真诚做人,努力做事!你想要的,岁月都会给你。Vue 项目中使用Apache ECharts 生成可视化图表库,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

步骤:

第一步:

通过: NPM 安装 ECharts;
 npm install echarts --save

第二步:

在 vue项目中的package.json中查看是否安装成功:

在这里插入图片描述

第三步:

在项目文件中使用;
<template>
	
	
	<div class="test">
		<!-- <h1>setup测试代码</h1> -->
		<!-- 柱状图 -->
		<div>
			<template>
				指标名称:
			  <el-select v-model="value" >
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			</template>
			
			时间节点:
			<el-input
			  
			  v-model="input"
			  :disabled="true">
			</el-input> -
			
			<el-input
			  
			  v-model="input"
			  :disabled="true">
			</el-input>
			
		</div>
		<div id="main" style="width: 100%;height: 500px;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		data(){
			
			return{
				
			}
		},
		mounted() {
			this.initCharts();
		},


		methods: {
			// 柱状图
			initCharts() {
				// 基于准备好的dom,初始化echarts实例
				let chartDom = document.getElementById("main")
				let myChart = echarts.init(chartDom);

				// 指定图表的配置项和数据
				let option = {
					
					        tooltip: {},
					        
					        xAxis: {
					          data: ['下沙', '白杨', '文潮', '河庄', '义蓬', '新湾','临江','前进']
					        },
					        yAxis: {},
					        series: [
					          {
					            name: '',
					            type: 'bar',
					            data: [5, 20, 36, 10, 20,26,33,50]
					          }
					        ]
					      };
				
				 myChart.setOption(option);
				 window.addEventListener("resize",()=>{
					 myChart.resize()
				 })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.test {
		width: 100%;
		height: 100%
	}
</style>

注意:

在这里插入图片描述

实例:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/188581.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!