echarts图优化

VisualInspection/js/lib/echarts/src/theme/default.js

@@ -0,0 +1,13 @@
+/**
+ * echarts默认主题，开发中
+ *
+ * @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
+ * @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
+ *
+ */
+define(function() {
+    var config = {
+    };
+
+    return config;
+});

VisualInspection/js/lib/echarts/src/theme/infographic.js

@@ -0,0 +1,297 @@
+define(function() {
+
+var theme = {
+    // 默认色板
+    color: [
+        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+    ],
+
+    // 图表标题
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#27727B'          // 主标题文字颜色
+        }
+    },
+
+    // 值域
+    dataRange: {
+        x:'right',
+        y:'center',
+        itemWidth: 5,
+        itemHeight:25,
+        color:['#C1232B','#FCCE10']
+    },
+
+    toolbox: {
+        color : [
+            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'
+        ],
+        effectiveColor : '#ff4500'
+    },
+
+    // 提示框
+    tooltip: {
+        backgroundColor: 'rgba(50,50,50,0.5)',     // 提示背景颜色，默认为透明度为0.7的黑色
+        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+            type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
+            lineStyle : {          // 直线指示器样式设置
+                color: '#27727B',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#27727B'
+            },
+            shadowStyle : {                     // 阴影指示器样式设置
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // 区域缩放控制器
+    dataZoom: {
+        dataBackgroundColor: 'rgba(181,195,52,0.3)',            // 数据背景颜色
+        fillerColor: 'rgba(181,195,52,0.2)',   // 填充颜色
+        handleColor: '#27727B'    // 手柄颜色
+    },
+
+    // 网格
+    grid: {
+        borderWidth:0
+    },
+
+    // 类目轴
+    categoryAxis: {
+        axisLine: {            // 坐标轴线
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: '#27727B'
+            }
+        },
+        splitLine: {           // 分隔线
+            show: false
+        }
+    },
+
+    // 数值型坐标轴默认参数
+    valueAxis: {
+        axisLine: {            // 坐标轴线
+            show: false
+        },
+        splitArea : {
+            show: false
+        },
+        splitLine: {           // 分隔线
+            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                color: ['#ccc'],
+                type: 'dashed'
+            }
+        }
+    },
+
+    polar : {
+        axisLine: {            // 坐标轴线
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: '#ddd'
+            }
+        },
+        splitArea : {
+            show : true,
+            areaStyle : {
+                color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
+            }
+        },
+        splitLine : {
+            lineStyle : {
+                color : '#ddd'
+            }
+        }
+    },
+
+    timeline : {
+        lineStyle : {
+            color : '#27727B'
+        },
+        controlStyle : {
+            normal : { color : '#27727B'},
+            emphasis : { color : '#27727B'}
+        },
+        symbol : 'emptyCircle',
+        symbolSize : 3
+    },
+
+    // 折线图默认参数
+    line: {
+        itemStyle: {
+            normal: {
+                borderWidth:2,
+                borderColor:'#fff',
+                lineStyle: {
+                    width: 3
+                }
+            },
+            emphasis: {
+                borderWidth:0
+            }
+        },
+        symbol: 'circle',  // 拐点图形类型
+        symbolSize: 3.5           // 拐点图形大小
+    },
+
+    // K线图默认参数
+    k: {
+        itemStyle: {
+            normal: {
+                color: '#C1232B',       // 阳线填充颜色
+                color0: '#B5C334',      // 阴线填充颜色
+                lineStyle: {
+                    width: 1,
+                    color: '#C1232B',   // 阳线边框颜色
+                    color0: '#B5C334'   // 阴线边框颜色
+                }
+            }
+        }
+    },
+
+    // 散点图默认参数
+    scatter: {
+        itemStyle: {
+            normal: {
+                borderWidth:1,
+                borderColor:'rgba(200,200,200,0.5)'
+            },
+            emphasis: {
+                borderWidth:0
+            }
+        },
+        symbol: 'star4',    // 图形类型
+        symbolSize: 4        // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
+    },
+
+    // 雷达图默认参数
+    radar : {
+        symbol: 'emptyCircle',    // 图形类型
+        symbolSize:3
+        //symbol: null,         // 拐点图形类型
+        //symbolRotate : null,  // 图形旋转控制
+    },
+
+    map: {
+        itemStyle: {
+            normal: {
+                areaStyle: {
+                    color: '#ddd'
+                },
+                label: {
+                    textStyle: {
+                        color: '#C1232B'
+                    }
+                }
+            },
+            emphasis: {                 // 也是选中样式
+                areaStyle: {
+                    color: '#fe994e'
+                },
+                label: {
+                    textStyle: {
+                        color: 'rgb(100,0,0)'
+                    }
+                }
+            }
+        }
+    },
+
+    force : {
+        itemStyle: {
+            normal: {
+                linkStyle : {
+                    color : '#27727B'
+                }
+            }
+        }
+    },
+
+    chord : {
+        itemStyle : {
+            normal : {
+                borderWidth: 1,
+                borderColor: 'rgba(128, 128, 128, 0.5)',
+                chordStyle : {
+                    lineStyle : {
+                        color : 'rgba(128, 128, 128, 0.5)'
+                    }
+                }
+            },
+            emphasis : {
+                borderWidth: 1,
+                borderColor: 'rgba(128, 128, 128, 0.5)',
+                chordStyle : {
+                    lineStyle : {
+                        color : 'rgba(128, 128, 128, 0.5)'
+                    }
+                }
+            }
+        }
+    },
+
+    gauge : {
+        center:['50%','80%'],
+        radius:'100%',
+        startAngle: 180,
+        endAngle : 0,
+        axisLine: {            // 坐标轴线
+            show: true,        // 默认显示，属性show控制显示与否
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: [[0.2, '#B5C334'],[0.8, '#27727B'],[1, '#C1232B']],
+                width: '40%'
+            }
+        },
+        axisTick: {            // 坐标轴小标记
+            splitNumber: 2,   // 每份split细分多少段
+            length: 5,        // 属性length控制线长
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: '#fff'
+            }
+        },
+        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
+            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                color: '#fff',
+                fontWeight:'bolder'
+            }
+        },
+        splitLine: {           // 分隔线
+            length: '5%',         // 属性length控制线长
+            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                color: '#fff'
+            }
+        },
+        pointer : {
+            width : '40%',
+            length: '80%',
+            color: '#fff'
+        },
+        title : {
+          offsetCenter: [0, -20],       // x, y，单位px
+          textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+            color: 'auto',
+            fontSize: 20
+          }
+        },
+        detail : {
+            offsetCenter: [0, 0],       // x, y，单位px
+            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                color: 'auto',
+                fontSize: 40
+            }
+        }
+    },
+
+    textStyle: {
+        fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
+    }
+};
+
+    return theme;
+});

VisualInspection/js/lib/echarts/src/theme/macarons.js

@@ -0,0 +1,257 @@
+define(function() {
+
+var theme = {
+    // 默认色板
+    color: [
+        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
+    ],
+
+    // 图表标题
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#008acd'          // 主标题文字颜色
+        }
+    },
+    
+    // 值域
+    dataRange: {
+        itemWidth: 15,
+        color: ['#5ab1ef','#e0ffff']
+    },
+
+    // 工具箱
+    toolbox: {
+        color : ['#1e90ff', '#1e90ff', '#1e90ff', '#1e90ff'],
+        effectiveColor : '#ff4500'
+    },
+
+    // 提示框
+    tooltip: {
+        backgroundColor: 'rgba(50,50,50,0.5)',     // 提示背景颜色，默认为透明度为0.7的黑色
+        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+            type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
+            lineStyle : {          // 直线指示器样式设置
+                color: '#008acd'
+            },
+            crossStyle: {
+                color: '#008acd'
+            },
+            shadowStyle : {                     // 阴影指示器样式设置
+                color: 'rgba(200,200,200,0.2)'
+            }
+        }
+    },
+
+    // 区域缩放控制器
+    dataZoom: {
+        dataBackgroundColor: '#efefff',            // 数据背景颜色
+        fillerColor: 'rgba(182,162,222,0.2)',   // 填充颜色
+        handleColor: '#008acd'    // 手柄颜色
+    },
+
+    // 网格
+    grid: {
+        borderColor: '#eee'
+    },
+
+    // 类目轴
+    categoryAxis: {
+        axisLine: {            // 坐标轴线
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: '#008acd'
+            }
+        },
+        splitLine: {           // 分隔线
+            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                color: ['#eee']
+            }
+        }
+    },
+
+    // 数值型坐标轴默认参数
+    valueAxis: {
+        axisLine: {            // 坐标轴线
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: '#008acd'
+            }
+        },
+        splitArea : {
+            show : true,
+            areaStyle : {
+                color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']
+            }
+        },
+        splitLine: {           // 分隔线
+            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                color: ['#eee']
+            }
+        }
+    },
+
+    polar : {
+        axisLine: {            // 坐标轴线
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: '#ddd'
+            }
+        },
+        splitArea : {
+            show : true,
+            areaStyle : {
+                color: ['rgba(250,250,250,0.2)','rgba(200,200,200,0.2)']
+            }
+        },
+        splitLine : {
+            lineStyle : {
+                color : '#ddd'
+            }
+        }
+    },
+
+    timeline : {
+        lineStyle : {
+            color : '#008acd'
+        },
+        controlStyle : {
+            normal : { color : '#008acd'},
+            emphasis : { color : '#008acd'}
+        },
+        symbol : 'emptyCircle',
+        symbolSize : 3
+    },
+
+    // 柱形图默认参数
+    bar: {
+        itemStyle: {
+            normal: {
+                barBorderRadius: 5
+            },
+            emphasis: {
+                barBorderRadius: 5
+            }
+        }
+    },
+
+    // 折线图默认参数
+    line: {
+        smooth : true,
+        symbol: 'emptyCircle',  // 拐点图形类型
+        symbolSize: 3           // 拐点图形大小
+    },
+    
+    // K线图默认参数
+    k: {
+        itemStyle: {
+            normal: {
+                color: '#d87a80',       // 阳线填充颜色
+                color0: '#2ec7c9',      // 阴线填充颜色
+                lineStyle: {
+                    color: '#d87a80',   // 阳线边框颜色
+                    color0: '#2ec7c9'   // 阴线边框颜色
+                }
+            }
+        }
+    },
+    
+    // 散点图默认参数
+    scatter: {
+        symbol: 'circle',    // 图形类型
+        symbolSize: 4        // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
+    },
+
+    // 雷达图默认参数
+    radar : {
+        symbol: 'emptyCircle',    // 图形类型
+        symbolSize:3
+        //symbol: null,         // 拐点图形类型
+        //symbolRotate : null,  // 图形旋转控制
+    },
+
+    map: {
+        itemStyle: {
+            normal: {
+                areaStyle: {
+                    color: '#ddd'
+                },
+                label: {
+                    textStyle: {
+                        color: '#d87a80'
+                    }
+                }
+            },
+            emphasis: {                 // 也是选中样式
+                areaStyle: {
+                    color: '#fe994e'
+                }
+            }
+        }
+    },
+    
+    force : {
+        itemStyle: {
+            normal: {
+                linkStyle : {
+                    color : '#1e90ff'
+                }
+            }
+        }
+    },
+
+    chord : {
+        itemStyle : {
+            normal : {
+                borderWidth: 1,
+                borderColor: 'rgba(128, 128, 128, 0.5)',
+                chordStyle : {
+                    lineStyle : {
+                        color : 'rgba(128, 128, 128, 0.5)'
+                    }
+                }
+            },
+            emphasis : {
+                borderWidth: 1,
+                borderColor: 'rgba(128, 128, 128, 0.5)',
+                chordStyle : {
+                    lineStyle : {
+                        color : 'rgba(128, 128, 128, 0.5)'
+                    }
+                }
+            }
+        }
+    },
+
+    gauge : {
+        axisLine: {            // 坐标轴线
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: [[0.2, '#2ec7c9'],[0.8, '#5ab1ef'],[1, '#d87a80']], 
+                width: 10
+            }
+        },
+        axisTick: {            // 坐标轴小标记
+            splitNumber: 10,   // 每份split细分多少段
+            length :15,        // 属性length控制线长
+            lineStyle: {       // 属性lineStyle控制线条样式
+                color: 'auto'
+            }
+        },
+        splitLine: {           // 分隔线
+            length :22,         // 属性length控制线长
+            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                color: 'auto'
+            }
+        },
+        pointer : {
+            width : 5
+        }
+    },
+    
+    textStyle: {
+        fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
+    }
+};
+
+    return theme;
+});

VisualInspection/js/statistics/personal_data_statistics.js

@@ -259,13 +259,14 @@ $(function(){
 	    require(
 		[
 			'echarts',
+			'echarts/theme/macarons', 
 			'echarts/chart/line', 
 			'echarts/chart/pie'
 		],
-			function (ec) {
+			function (ec,theme) {
 					// 基于准备好的dom，初始化echarts图表
-					score_statistics = ec.init(document.getElementById('personal-score-statistics')); 
-					check_type = ec.init(document.getElementById('personal-check-type'));	
+					score_statistics = ec.init(document.getElementById('personal-score-statistics'),theme); 
+					check_type = ec.init(document.getElementById('personal-check-type'),theme);	
 			}
        ); 
 	}

VisualInspection/js/statistics/road_manage_statistics.js

@@ -418,20 +418,21 @@ $(function(){
 	    require(
 		[
 			'echarts',
+			'echarts/theme/macarons', 
 			'echarts/chart/line', 
 			'echarts/chart/bar',
 			'echarts/chart/pie'
 		],
-	function (ec) {
+	function (ec,theme) {
 			// 基于准备好的dom，初始化echarts图表
 			if(flag){
-			year_assess = ec.init(document.getElementById('roadManager-year-assess')); 
+			year_assess = ec.init(document.getElementById('roadManager-year-assess'),theme); 
 		    }
-			points_assess = ec.init(document.getElementById('roadManager-points-assess'));
+			points_assess = ec.init(document.getElementById('roadManager-points-assess'),theme);
 		    score_rank = ec.init(document.getElementById('tollStation-score-rank'));
 			rank_pre = ec.init(document.getElementById('people-rank-pre'));
             rank_suf = ec.init(document.getElementById('people-rank-suf'));
-			check_type = ec.init(document.getElementById('server-check-type'));
+			check_type = ec.init(document.getElementById('server-check-type'),theme);
 			people_points = ec.init(document.getElementById('each-people-points'));
 			}
 		); 
@@ -807,6 +808,7 @@ $(function(){
 					data: array_points_pre,
 					itemStyle: {
 						normal: {
+							color:'#b3d4fc',
 							label: {
 								show: true,
 								position: 'insideTop'
@@ -820,6 +822,7 @@ $(function(){
 					data: arrar_points_month,
 					itemStyle: {
 						normal: {
+							color:'#ea644a',
 							label: {
 								show: true,
 								position: 'insideTop'

VisualInspection/js/statistics/toll_station_statistics.js

@@ -514,20 +514,21 @@ $(function(){
 	    require(
 		[
 			'echarts',
+			'echarts/theme/macarons', 
 			'echarts/chart/line', 
 			'echarts/chart/bar',
 			'echarts/chart/pie'
 		],
-			function (ec) {
+			function (ec,theme) {
 					// 基于准备好的dom，初始化echarts图表
 					if(flag){
-						year_assess = ec.init(document.getElementById('tollStation-year-assess'));
+						year_assess = ec.init(document.getElementById('tollStation-year-assess'),theme);
 					} 
-						points_assess = ec.init(document.getElementById('tollStation-points-assess'));
+						points_assess = ec.init(document.getElementById('tollStation-points-assess'),theme);
 						rank_assess = ec.init(document.getElementById('progress-rank-assess'));
 						score_rank = ec.init(document.getElementById('people-score-rank'));
 						check_type = ec.init(document.getElementById('server-check-type'));
-						people_points = ec.init(document.getElementById('each-people-points'));
+						people_points = ec.init(document.getElementById('each-people-points'),theme);
 						rank_assess_back = ec.init(document.getElementById('backward-rank-assess'));
 			}
 	    ); 
@@ -759,22 +760,28 @@ $(function(){
 		 * 图四
 		 */
 		function people_score_rank(){
-			console.log(array_score_order+"-----"+array_score_data)
 					option = {
 				color : [ '#00ced1' ],// 条形图颜色
 				tooltip : {
 					trigger: 'axis'
 				},
+				grid:{
+                    width:"88%"
+                },
 				legend: {
 					data:['平均分']
 				},
 				calculable : true,
 				xAxis : [
 					{
+							axisLabel: {  
+				interval:0
+				}  ,
 						type : 'category',
 						data : array_score_order
 					}
 				],
+			
 				yAxis : [
 					{
 						type : 'value',
@@ -890,6 +897,7 @@ $(function(){
 					data:array_points_pre,
 					itemStyle: {
 						normal: {
+							color:'#b3d4fc',
 							label: {
 								show: true,
 								position: 'insideTop'
@@ -903,6 +911,7 @@ $(function(){
 					data:arrar_points_month,
 					itemStyle: {
 						normal: {
+							color:'#ea644a',
 							label: {
 								show: true,
 								position: 'insideTop'

VisualInspection/js/statistics/total_company_statistics.js

@@ -359,19 +359,20 @@ $(function(){
 			require(
 			[
 				'echarts',
+				'echarts/theme/macarons', 
 				'echarts/chart/line', 
 				'echarts/chart/bar',
 				'echarts/chart/pie'
 			],
-		function (ec) {
+		function (ec,theme) {
 				// 基于准备好的dom，初始化echarts图表
 				if(flag){
-					year_assess = ec.init(document.getElementById('company-year-assess')); 
+					year_assess = ec.init(document.getElementById('company-year-assess'),theme); 
 				}
-				points_assess = ec.init(document.getElementById('company-points-assess'));
+				points_assess = ec.init(document.getElementById('company-points-assess'),theme);
 				score_rank = ec.init(document.getElementById('roadManager-score-rank'));
 				stationAll_rank = ec.init(document.getElementById('company-stationAll-rank'));
-				check_type = ec.init(document.getElementById('server-check-type'));
+				check_type = ec.init(document.getElementById('server-check-type'),theme);
 				people_points = ec.init(document.getElementById('each-people-points'));
 
 			}
@@ -391,8 +392,15 @@ $(function(){
 					legend: {
 						data:['平均分']
 					},
-					toolbox: {
+					 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 : [
@@ -673,6 +681,7 @@ $(function(){
 					data:array_points_pre,
 					itemStyle: {
 						normal: {
+							color:'#b3d4fc',
 							label: {
 								show: true,
 								position: 'insideTop'
@@ -686,6 +695,7 @@ $(function(){
 					data:arrar_points_month,
 					itemStyle: {
 						normal: {
+							color:'#ea644a',
 							label: {
 								show: true,
 								position: 'insideTop'