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

蔚落 2023-10-04 20:47 55阅读 0赞

### 步骤： ###

#### 第一步： ####

通过： NPM 安装 ECharts；
     npm install echarts --save

#### 第二步： ####

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

![在这里插入图片描述][37edc93841144677b1986f1dc375f79d.png_pic_center]

#### 第三步： ####

##### 在项目文件中使用; #####

<template>
    	
    	
    	<div class="test">
    		
    		
    		<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>

#### 注意： ####

![在这里插入图片描述][0a3b12207ead475e96a9de8ada6f5f52.png_pic_center]

### 实例： ###

![在这里插入图片描述][626f36e1c450485dac8aeeaf1af87b04.png_pic_center]

[37edc93841144677b1986f1dc375f79d.png_pic_center]: https://img-blog.csdnimg.cn/37edc93841144677b1986f1dc375f79d.png#pic_center
[0a3b12207ead475e96a9de8ada6f5f52.png_pic_center]: https://img-blog.csdnimg.cn/0a3b12207ead475e96a9de8ada6f5f52.png#pic_center
[626f36e1c450485dac8aeeaf1af87b04.png_pic_center]: https://img-blog.csdnimg.cn/626f36e1c450485dac8aeeaf1af87b04.png#pic_center