echart line 阴影渐变,颜色自定义缩略图
<div id="myChart" :style="{ height: '230px'}"></div>
mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				let myChart = this.$echarts.init(document.getElementById("myChart"));
				myChart.setOption({
					title: {
						text: '报警态势曲线',
						textStyle: {
							color: '#333',
							fontSize: 14,
							fontWeight: '700'
						},
						padding: [5, 0, 0, 0],
					},
					grid: {
						left: 0,
						top: 40,
						bottom: 20,
						right: 10,
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: [
							'第2周',
							'第4周',
							'第5周',
							'第6周',
							'第7周',
							'第8周',
						],
						axisLine: {
							lineStyle: {
								color: '#f3f3f3'
							}
						},
						axisTick: {
							length: 3
						},
						axisLabel: {
							color: '#999'
						},
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: true,
							lineStyle: {
								color: '#f3f3f3'
							}
						},
						axisLabel: {
							color: '#666',
							formatter: '{value}次',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#f3f3f3'
							}
						},
					},
					tooltip: {
						trigger: 'axis',
						padding: [12, 17, 20, 23],
						textStyle: {
							color: '#ffffff'
						},
						renderMode: 'html',
						className: 'tooltip',
					},
					series: [{
						name: '报警态势曲线',
						type: 'line',
						data: [0, 10, 2, 4, 4, 7, 0, 0, 0, 3, 0, 9, 6, 0, 0],
						smooth: true, // 平滑曲线
						showSymbol: false,
						itemStyle: {
							color: '#126EFC'
						},
						lineStyle: {
							width: 3,
							color: '#126EFC'
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#126EFC' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#ffffff' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}, ],
				});
			},
		}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注