未来一周气温变化echarts 折线配置项内容和展示

纯属虚构

      var json = {
		chart0: {
			text: '未来一周气温变化',
			subtext: '纯属虚构',
			legend: ['最高气温', '最低气温'],
			xcategory: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			high: [11, 11, 15, 13, 12, 13, 10],
			highLine: [],
			low: [1, -2, 2, 5, 3, 2, 0],
			lowLine: []
		}
};

	//计算描点路径
	zrUtil.each(json.chart0.xcategory, function(item, index) {
		json.chart0.highLine.push([{
			coord: [index, json.chart0.high[index]]
		}, {
			coord: [index + 1, json.chart0.high[index + 1]]
		}]);
	});
	zrUtil.each(json.chart0.xcategory, function(item, index) {
		json.chart0.lowLine.push([{
			coord: [index, json.chart0.low[index]]
		}, {
			coord: [index + 1, json.chart0.low[index + 1]]
		}]);
	});

option = {
		title: {
			text: json.chart0.text,
			subtext: json.chart0.subtext
		},
		animationEasing: 'ElasticOut',
		legend: {
			data: json.chart0.legend
		},
		calculable: true,
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			data: json.chart0.xcategory
		}],
		yAxis: [{
			type: 'value',
			axisLabel: {
				formatter: '{value} °C'
			}
		}],
		series: [{
			name: '最高气温',
			type: 'line',
			data: json.chart0.high,
		}, {
			name: '最低气温',
			type: 'line',
			data: json.chart0.low
		}, {
			name: '最高气温描点',
			type: 'lines',
			coordinateSystem: 'cartesian2d',
			zlevel: 2,
			effect: {
				show: true,
				smooth: false,
				period: 6,
				//trailLength: 0,
				//symbol: planePath,
				//color:'rgba(55,155,255,0.5)',
				symbolSize: 8
			},
			lineStyle: {
				normal: {
					color:'red',
					width: 1,
					opacity: 0.4,
					curveness: 0 //贝塞尔曲线度
				}
			},
			data: json.chart0.highLine
		}, {
			name: '最低气温描点',
			type: 'lines',
			coordinateSystem: 'cartesian2d',
			zlevel: 3,
			effect: {
				show: true,
				smooth: false,
				period: 6,
				symbolSize: 8
			},
			lineStyle: {
				normal: {
					color: function() {
						return getColorPalette()[1];
					}(),
					width: 1,
					opacity: 0.4,
					curveness: 0 //贝塞尔曲线度
				}
			},
			data: json.chart0.lowLine
		}]
	};