vue中安装并使用echarts（个人经验）

安装echarts的七个步骤

echarts的官网文档：https://echarts.baidu.com/

v-echarts的官方文档：https://v-charts.js.org/#/

echarts 的配置手册(使用echarts时配置项很重要)：

https://echarts.apache.org/zh/option.html#title

一 检查vue的版本是否为2.0 (不重要)

（我一般直接使用 vue create vuedemo 来新建一个项目，选择2.0的版本）

二安装echarts 的版本为4.8

注 ：如果你更新为最新的版本5.0.2 会报错 导致 echarts 不能正常运行

npm install echarts@4.8.0 -S

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

示例

<template>
	<div class="hello">
		<div id="main" style="width: 600px;height:400px;"></div>
	</div>
</template>
<script>
	import echarts from 'echarts'
	export default {
		name: 'HelloWorld',
		
		methods:{
			callser() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '第一个 ECharts 实例'
					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		},
		mounted() {
			this.callser()
		}
	}
</script>

效果图

注：vue 项目中使用echarts 数据需要从后端获取渲染时 需要申明一个新的方法 处理好之后调用（并传参 ：参数即为你再echarts中使用的data）再调用 有 echart的这个方法 譬如：

						const dayArrarx = [];
						const dayArrary = [];
						res.data['dailyDetail'].forEach(item => {
							dayArrary.push(item.name);
							dayArrarx.push(item.value);
						});
						this.callser(dayArrary, dayArrarx);//callser为有echarts的方法 即可以在 mounted挂载之后删除了

		callser(dayArrary, dayArrarx) {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据
				var option = {
					color: '#4184F4',
					xAxis: [{
						type: 'category',
						data: dayArrary,
					}],
					yAxis: {
						type: 'value',
						show: false

					},
					series: [{
						data: dayArrarx,
						barWidth: 15,
						type: 'bar',
					}],
					tooltip: {
						trigger: 'item',
						show: true
					},


				}
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			},

多重y轴是时：在serial里加入yAxisIndex属性。

series: [{name: '温度', data: data.data1, type: 'line',yAxisIndex:1,},
{name: '湿度', data: data.data2, type: 'line',yAxisIndex:0,},
{name: '风力', yAxisIndex:2,data: data.data3, type: 'line'} ,
{name: 'PM2.5质量', data: data.data4, type: 'line',yAxisIndex:3,},
{name: '人口密度', data: data.data5, type: 'line',yAxisIndex:4,}]

使用grid属性

grid:{
                    x2:85,
                    x:55,
                }