15Echarts - 折线图（Custom Graphic Component）

效果图

源代码

	
		
		ECharts
		
		
	

	
		
		

		
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			var option = {
				color: ['#8EC9EB'],
				legend: {
					data: ['高度(km)与气温(°C)变化关系']
				},
				tooltip: {
					trigger: 'axis',
					formatter: "Temperature : {b}km : {c}°C"
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					splitLine: {
						show: false
					},
					axisLabel: {
						formatter: '{value} °C'
					}
				},
				yAxis: {
					type: 'category',
					axisLine: {
						onZero: false
					},
					axisLabel: {
						formatter: '{value} km'
					},
					boundaryGap: true,
					data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
				},
				graphic: [{
						type: 'image',
						id: 'logo',
						right: 20,
						top: 20,
						z: -10,
						bounding: 'raw',
						origin: [75, 75],
						style: {
							image: 'http://echarts.baidu.com/images/favicon.png',
							width: 150,
							height: 150,
							opacity: 0.4
						}
					},
					{
						type: 'group',
						rotation: Math.PI / 4,
						bounding: 'raw',
						right: 110,
						bottom: 110,
						z: 100,
						children: [{
								type: 'rect',
								left: 'center',
								top: 'center',
								z: 100,
								shape: {
									width: 400,
									height: 50
								},
								style: {
									fill: 'rgba(0,0,0,0.3)'
								}
							},
							{
								type: 'text',
								left: 'center',
								top: 'center',
								z: 100,
								style: {
									fill: '#fff',
									text: 'ECHARTS BAR CHART',
									font: 'bold 26px Microsoft YaHei'
								}
							}
						]
					},
					{
						type: 'group',
						left: '10%',
						top: 'center',
						children: [{
								type: 'rect',
								z: 100,
								left: 'center',
								top: 'middle',
								shape: {
									width: 190,
									height: 90
								},
								style: {
									fill: '#fff',
									stroke: '#555',
									lineWidth: 2,
									shadowBlur: 8,
									shadowOffsetX: 3,
									shadowOffsetY: 3,
									shadowColor: 'rgba(0,0,0,0.3)'
								}
							},
							{
								type: 'text',
								z: 100,
								left: 'center',
								top: 'middle',
								style: {
									fill: '#333',
									text: [
										'横轴表示温度，单位是°C',
										'纵轴表示高度，单位是km',
										'右上角有一个图片做的水印',
										'这个文本块可以放在图中各',
										'种位置'
									].join('\n'),
									font: '14px Microsoft YaHei'
								}
							}
						]
					}
				],
				series: [{
					name: '高度(km)与气温(°C)变化关系',
					type: 'bar',
					smooth: true,
					barCategoryGap: 25,
					lineStyle: {
						normal: {
							width: 3,
							shadowColor: 'rgba(0,0,0,0.4)',
							shadowBlur: 10,
							shadowOffsetY: 10
						}
					},
					data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
				}]
			};

			var rotation = 0;
			setInterval(function() {
				myChart.setOption({
					graphic: {
						id: 'logo',
						rotation: (rotation += Math.PI / 360) % (Math.PI * 2)
					}
				});
			}, 30);

			myChart.setOption(option);