vue中使用echarts

先定义echarts为全局变量,在main.js中定义

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

<template>
	<div class="JNPF-common-layout">
		<div class="JNPF-common-layout-center">
			<el-row class="JNPF-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="选择年份">
							<el-date-picker v-model="query.year" type="year" placeholder="选择年" value-format="yyyy">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="JNPF-common-layout-main JNPF-flex-main">
				<div class="echart" id="byrsBar" :style="{ float: 'left', width: '100%', height: '100%'  }"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '@/utils/request'

	export default {
		components: {},
		data() {
			return {
				data: [],
				query: {
					year: '',
				},
				defaultProps: {
					children: 'children',
					label: 'fullName'
				},
				list: [],
				listLoading: true,
				total: 0,
				formVisible: false,
				exportBoxVisible: false,
			}
		},
		computed: {},
		created() {
			const year = new Date().getFullYear();
			console.log('年份', year)
			this.query.year = year + '';
			this.initData()
		},
		methods: {
			getCharts() {
				const option = {
					title: {
						text: '施工日计划施工数量柱状统计图',
						subtext: '默认为当前年份',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '施工数:',
						barWidth: '60%',
						data: [120, 200, 150, 80, 70, 110, 130, 123, 134, 567, 111, 11],
						type: 'bar'
					}]
				}
				const byrsBar = this.$echarts.init(document.getElementById('byrsBar')) // 图标初始化
				byrsBar.setOption(option) // 渲染页面
				// 随着屏幕大小调节图表
				window.addEventListener('resize', () => {
					byrsBar.resize()
				})
			},
			initData() {
				console.log('查询', this.query.year)
				this.listLoading = true;
				this.$nextTick(() => {
					this.getCharts();
				})
                // 调用接口
				request({
					url: `/api/module/count/bing`,
					method: 'get',
					data: this.query
				}).then(res => {
					// this.list = res.data.list
					this.listLoading = false
				})
			},
			search() {
				this.initData()
			},
			refresh(isrRefresh) {
				this.formVisible = false
				if (isrRefresh) this.reset()
			},
			reset() {
				for (let key in this.query) {
					this.query[key] = undefined
				}
				// 其他置空,年份选择框为当年年份
				const year = new Date().getFullYear();
				this.query.year = year + '';
				this.initData()
			}
		}
	}
</script>