echarts折线图案例基于echarts-plain.js

比眉伴天荒 2022-05-11 18:04 305阅读 0赞

最近接触前端,要写个报表,但是由于公司用的是echarts-plain.js,导致我在网上找到的许多属性设置的东西由于就是不同而失去作用.  
使用echarts-plain.js时,dataView不会显示表格,只会显示文字.如果想要显示表格的话,需要自己动手写一个方法,动态加载表格.

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		
    	   <script src="js/echarts-plain.js"></script> 
    	
    
    	</head>
    
    	<body>
    		<div id="main" style="width: 1800px;height:800px;"></div>
    
    		<script type="text/javascript">
    			var myChart = echarts.init(document.getElementById('main'));
    			var option = {
    
    				backgroundColor: '#000000', //背景颜色
    				title: {
    					text: '未来一周气温变化', //主标题
    					subtext: '纯属虚构', //副标题
    					x: 'center', //标题位置,center中间,left左,right右
    					textStyle: { //设置主标题风格
    						color: '#FFFF00' //设置主标题字体颜色
    						// fontStyle:1//主标题文字风格
    					}
    				},
    				tooltip: {
    					trigger: 'axis'
    				},
    				legend: {
    					// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
    					orient: 'horizontal',
    					// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
    					x: 'center',
    					// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
    					y: 'bottom',
    					data: ['最高气温', '最低气温']
    				},
    				//图表的位置
    				grid: {
    					y: '10%', // 等价于 y: '16%'
    					left: '3%',
    					right: '10%',
    					y2: '16%',
    					containLabel: true
    				},
    
    				toolbox: {
    					show: true,
    					feature: {
    						mark: {
    							show: true
    						},
    						dataView: {
    							show: true,
    							readOnly: false
    						},
    						magicType: {
    							show: true,
    							type: ['line', 'bar']
    						},
    						restore: {
    							show: true
    						},
    						saveAsImage: {
    							show: true
    						}
    					}
    				},
    				calculable: true,
    				xAxis: [{
    					type: 'category',
    
    					//x轴属性设置
    					axisLine: {
    						lineStyle: {
    							// 设置x轴颜色
    							color: '#912CEE'
    						}
    					},
    					// 设置X轴刻度数据属性设置
    					axisLabel: {
    						textStyle: {
    							color: '#912CEE'
    						},
    						rotate: 0, // 旋转角度
    						interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
    					},
    					// boundaryGap值为false的时候，折线第一个点在y轴上
    
    					boundaryGap: false,
    					boundaryGap: false,
    					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    				}],
    				yAxis: [{
    
    					name: '温度',
    					type: 'value',
    					max: 50,
    					min: -10,
    
    					//y轴属性设置
    					axisLine: {
    						lineStyle: {
    							// 设置y轴颜色
    							color: '#87CEFA'
    						}
    					},
    					//y轴刻度数据属性设置
    					axisLabel: {
    						textStyle: {
    							color: '#87CEFA'
    						},
    						show: true,
    						interval: 'auto',
    						formatter: '{value} °C'
    					}
    				}],
    				series: [{
    						name: '最高气温',
    						type: 'line',
    						data: [11, 11, 15, 13, 12, 13, 10],
    						markPoint: {
    							data: [{
    									type: 'max',
    									name: '最大值'
    								},
    								{
    									type: 'min',
    									name: '最小值'
    								}
    							]
    						},
    						markLine: {
    							data: [{
    								type: 'average',
    								name: '平均值'
    							}]
    						}
    					},
    					{
    						name: '最低气温',
    						type: 'line',
    						data: [1, -2, 2, 5, 3, 2, 0],
    						markPoint: {
    							data: [{
    								name: '周最低',
    								value: -2,
    								xAxis: 1,
    								yAxis: -1.5
    							}]
    						},
    						markLine: {
    							data: [{
    								type: 'average',
    								name: '平均值'
    							}]
    						}
    					}
    				]
    			};
    
    			// 为echarts对象加载数据 
    			myChart.setOption(option);
    		</script>
    	</body>
    
    </html>