Vue 集成echarts 图表组件

桃扇骨 2023-10-18 16:33 156阅读 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>

效果展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190401174522452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70