vue 引入echarts并切换柱状折线图，改变折线的颜色

1.安装依赖

npm install echarts -S

2.引入main.js

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

3.创建一个vue页面

<template>
	<DIV>
		<el-card id="main" style="width:32.5%;height:1.7rem;"></el-card>
	</DIV>
</template>

<script>
	export default {
		name: "homepage",
	  	data() {
		    return {
				data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				datalist:[2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3]
			}
		},
		mounted(){
			this.graph()
		},
		methods:{
			graph(){
				var myChart = this.$echarts.init(document.getElementById('main'));
				// 指定图表的配置项和数据
				var option = {
					title: {text: '车俩情况',top:'5%',left: 'center',align: 'right'},//头部
					toolbox: {
						show: true,
						feature: {
							magicType: {show: true, type: ['line', 'bar']},//展示类型
							restore: {show: true},//刷新按钮
							dataView: {show: true, readOnly: false},//表图数据
							saveAsImage: {show: true},//下载表图
						}
					},
					tooltip: {trigger: 'axis'},//鼠标事件显示参数
					grid: {left: '4%',right: '10%',bottom: '5%',containLabel: true},//表格位置
					dataZoom:[{type:"inside"}],//滚动缩放
					xAxis: {type: 'category',boundaryGap: false,data: this.data},//x轴数据
					yAxis: {type: 'value',minInterval: 1,},//y轴类型
					series: [{itemStyle : {normal : {color:'#409EFF', //改变折线点的颜色
								lineStyle:{color:'#409EFF'} //改变折线颜色
								},
							},
							name: '使用量',
							type: 'line',
							stack: '总量',
							data: this.datalist,//y轴数据
							markPoint: {
								data: [
									{type: 'max', name: '最大值'},
									{type: 'min', name: '最小值'},
								],
								symbolSize:[35, 35],// 显示最大最小值容器大小
							},
							markLine: {
								data: [
									{type: 'average', name: '平均值'}//显示平均值
								]
							}
						
					}]
			   };
			   // 使用刚指定的配置项和数据显示图表。
			   myChart.setOption(option);
			}
		}
	}
</script>

<style>
</style>

效果展示