Vue实现可视化图表Echarts功能：

1、文档：

【1】百度Echarts
【2】 Echarts社区

2、使用案例:

npm install echarts--save

<template>
	<div class="main">
		<div class="header">
			<h3>本周过磅车辆统计</h3>
		</div>

		<div class="content">
			<div id="echart" :style="{ height: '280px', width: '100%' }" />
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts'  //npm install echarts@4.8 --save建议安装此版本，可以直接用中国地图
require('echarts/theme/macarons') // echarts theme

import { firstWeightWeekList } from '@/api/manage/firstAPI.js'

export default {
	data() {
		return {

		}
	},
	created() {
		this.init()
	},
	methods: {
		init() {
			let param = {
				deptId: '1',
			}
			firstWeightWeekList({ param }).then(res => {
				let xAxisarr = [], yAxisarr = []
				for (let item in res.data.data) {
					xAxisarr.push(item)
					yAxisarr.push(res.data.data[item])
				}
				let Echart = echarts.init(document.getElementById('echart'))
				Echart.clear()
				Echart.setOption({
						tooltip: {
							trigger: 'axis',
							showContent: true
						},
						legend: {
							left: 'center',
							textStyle: {
								color: '#fff',
							},
						},
						xAxis: {
							type: 'category',
							axisLabel: {
								show: true,// 是否显示刻度标签
								color: '#FFF',// 刻度标签文字的颜色
							},
							//data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
							data: xAxisarr  //让后台数据覆盖掉假数据
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,// 是否显示刻度标签
								color: '#FFF',// 刻度标签文字的颜色
							},
						},
						series: [{
							name: '车辆',
							type: 'line',
							smooth: true,
							emphasis: {
								focus: 'series'
							},
							//data: [150, 230, 224, 218, 135, 147, 260],
							data: yAxisarr  //让后台数据覆盖掉假数据
						}]
				})
				//window.addEventListener("resize", function() {
				//	Echart.resize();
				//	//Echart是你的初始化echarts图表时取的名字
				//});
				window.onresize = Echart.resize; // 窗口或框架被调整大小时执行Echart.resize
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.main {
	width: 100%;
	height: 100%;
	color: #fff;
}

.header {
	width: 100%;
	height: 45px;
	line-height: 45px;
	border-bottom: 2px solid rgb(36, 148, 215);

	display: flex;
	align-items: center;
	justify-content: space-between;

	h3 {
		&::before {
			content: '';
			width: 10px;
			height: 10px;
			display: inline-block;
			background: #fff;
			border-radius: 50%;
			margin: 0 10px;
		}
	}

	div {
		padding-right: 10px;
	}
}

.content {
	width: 100%;
	height: calc(100% - 45px);
	color: #fff;
	box-sizing: border-box;
}
</style>