echarts设置面积图面积区域渐变与echarts折线图线条设置为虚线

2018-09-11 13:57:08

1. echarts 设置面积图面积区域渐变.

var colorArr = ['#a6b5ff', '#a6b5ff', '#9692ff', '#33cef2'],
var option = {
	color:colorArr, //设置线条颜色
	series: [{
		name: '邮件营销',
		type: 'line',
		stack: '总量',
		areaStyle: {
			normal: {}
		},
		data: [120, 132, 191, 134, 90, 230, 210],
		smooth: true,
		areaStyle: {
			normal: {
				opacity: 0.3,
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
					offset: 0,
					color: colorArr[0] //这里是我设置的渐变的颜色从线条颜色变为白色,如果是循环数据,其中的0依次循环colorArr 就ok了
				}, {
					offset: 1,
					color: '#fff'
				}])
			}
		}
	}, {
		name: '联盟广告',
		type: 'line',
		stack: '总量',
		areaStyle: {
			normal: {}
		},
		data: [100, 182, 111, 84, 90, 120, 250],
		smooth: true,
	}]
}

2. echarts 折线图设置折线线条为虚线

series: [{
	name: '联盟广告',
	type: 'line',
	data: [100, 182, 111, 84, 90, 120, 250],
	smooth: true,
	itemStyle: {
		normal: {
			lineStyle: {
				width: 2,
				type: 'dashed' //'dotted'小圆点虚线 'solid'实线
			}
		}
	},
}]

效果图如图所示

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2021 zhmzjl.com | by: KAPO