echarts 6色折线图

<template>
	<div :class="className" :style="{height:height,width:width}" id="myChart1" />
</template>

<script>
	import * as echarts from 'echarts';
	
	export default {
		 // mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '21vh'
			},
			chartData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				
				timer: 0,
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOption(val)
					// this.setOptions(val)
				}
			}
		},
		mounted() {
			this.initChart();
		},
		beforeDestroy() {
			
		},
		methods: {
			
			initChart() {
				var totalFlowRate = echarts.init(document.getElementById('myChart1'));
				var totalFlowRateOption = {
					animation: false,
					tooltip: {
						show: false
					},
					grid: {
						left: 30,
						right: 15,
						botom: 20,
						top: 15
					},
					legend: {
						bottom: -5,
						data: ['学习宣传理论政策', '培育践行主流价值', '扎实推进文明创建', '大力弘扬时代新风', '丰富活跃文化生活', '深化开展志愿服务'],
						textStyle: { //图例文字的样式
							color: '#A9D5E8',
							fontSize: 12
						}
					},
					xAxis: {
						boundaryGap: false,
						splitLine: {
							show: false
						},
						axisLabel: {
							color: "#8590A4",
							textStyle: {
								fontSize: 12,
								fontWeight: 400,

							},
						},
						/*网格线*/
						axisLine: {
							// 轴线
							show: true,
							lineStyle: {
								color: "#56678D", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
								width: 1, //y轴线的宽度
								type: "solid" //y轴线为实线
							},
							// color: '#268C8C',
						},
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					},

					yAxis: {
						boundaryGap: false,
						min: 0,
						max: 250,
						axisTick: {
							// 轴刻度
							show: false,
						},
						axisLabel: {
							color: "#8590A4",
							textStyle: {
								fontSize: 12,
								fontWeight: 400,

							},
						},
						splitLine: {
							// 网格线
							show: true,
							lineStyle: { //分割线
								color: "#30436D",
								width: 1,
								type: "dashed" //dotted：虚线 solid:实线
							}

						},
						axisLine: {
							// 轴线
							show: false,
							lineStyle: {
								color: "#fff", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
								width: 1, //y轴线的宽度
								type: "solid" //y轴线为实线
							},
						},

					},
					series: [{
							name: '学习宣传理论政策',
							type: 'line',
							data: [20, 25, 32, 41, 50, 53, 63, 66, 78, 90, 110, 115, ],
							showSymbol: false,
							itemStyle: {
								normal: {
									lineStyle: {
										color: '#477BFF' /*折线的颜色*/
									},
									color: "#477BFF" /*图例(legend)的颜色,不是图例说明文字的颜色*/
								}
							},
						},
						{
							name: '培育践行主流价值',
							type: 'line',
							data: [50, 60, 80, 120, 140, 86, 96, 102, 78, 90, 120, 150, ],
							showSymbol: false,
							itemStyle: {
								normal: {
									lineStyle: {
										color: '#47D1CB' /*折线的颜色*/
									},
									color: "#47D1CB" /*图例(legend)的颜色,不是图例说明文字的颜色*/
								}
							},
						},
						{
							name: '扎实推进文明创建',
							type: 'line',
							data: [60, 80, 120, 90, 86, 110, 160, 123, 110, 68, 86, 95],
							showSymbol: false,
							itemStyle: {
								normal: {
									lineStyle: {
										color: '#6F47FF' /*折线的颜色*/
									},
									color: "#6F47FF" /*图例(legend)的颜色,不是图例说明文字的颜色*/
								}
							},
						},
						{
							name: '大力弘扬时代新风',
							type: 'line',
							data: [120, 150, 182, 160, 123, 190, 163, 145, 169, 210, 169, 160],
							showSymbol: false,
							itemStyle: {
								normal: {
									lineStyle: {
										color: '#FFCB47' /*折线的颜色*/
									},
									color: "#FFCB47" /*图例(legend)的颜色,不是图例说明文字的颜色*/
								}
							},
						},
						{
							name: '丰富活跃文化生活',
							type: 'line',
							data: [150, 182, 160, 123, 190, 163, 145, 250, 210, 169, 160, 210],
							showSymbol: false,
							itemStyle: {
								normal: {
									lineStyle: {
										color: '#FF477B' /*折线的颜色*/
									},
									color: "#FF477B" /*图例(legend)的颜色,不是图例说明文字的颜色*/
								}
							},
						},
						{
							name: '深化开展志愿服务',
							type: 'line',
							data: [120, 148, 169, 110, 160, 132, 189, 119, 155, 129, 210, 223],
							showSymbol: false,
							itemStyle: {
								normal: {
									lineStyle: {
										color: '#59DBFF' /*折线的颜色*/
									},
									color: "#59DBFF" /*图例(legend)的颜色,不是图例说明文字的颜色*/
								}
							},
						}
					]

				};
				totalFlowRate.setOption(totalFlowRateOption);



			},


		}
	}
</script>

 "vue": "2.6.10", "echarts": "^5.2.0",