123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 |
- /**
- * 线图与柱图的通用样式
- * @param op
- * @returns {___anonymous_option}
- */
- function getOption(op){
- option={
- borderWidth:0,
- title: {
- show:true,
- text:op.title,
- x:"left",
- textStyle: {
- color: "#FFC000",
- fontSize: 14,
- fontStyle: "normal",
- fontFamily:"微软雅黑",
- fontWeight: "bolder",
- textAlign:"right",
- align: "right",
- baseline: "middle"
- },
- x: "left",
- subtext:op.subtext,
- subtextStyle: {
- color: "white",//#C00000
- textAlign:"right",
- fontSize: 16,
- fontStyle: "normal",
- fontWeight: "bolder",
- align: "right",
- baseline: "middle"
- }
- },
- tooltip: {
- // trigger: "item",
- trigger: 'axis',
- trigger: (function(){
- if(op.trigger==undefined)return"item";
- return op.trigger;
- })(),
-
- axisPointer:
- {
- type : 'cross',
- lineStyle :
- {
- color: '#a7a7a7'
- }
- },
- //百分比的函数设计在数据中体现
- //formatter: "{a} <br/>{b} : {c} ({d}%)",
- show: true,
- showDelay: 20, // 延迟,单位ms
- hideDelay: 100, // 隐藏延迟
- transitionDuration : 0.4, // 动画,单位s
- backgroundColor: 'rgba(0,0,0,0.7)',
- borderColor: '#333',
- borderRadius: 8,
- borderWidth: 0,
- padding: 5,
- textStyle: {
- color: "#fff",
- fontSize: 12,
- fontStyle: "normal",
- fontWeight: "normal",
- align: "center",
- baseline: "middle"
- },
- backgroundColor: "rgba(0,0,0,0.7)"
- },
- legend: {
- selected : (function(){
- return op.selected== undefined?null:op.selected;
- })(),
- selectedMode: (function(){
- return op.selectedMode== undefined?true:op.selectedMode;
- })(),
- data:op.leArr,//图例数据
- x: "right",
- y: "bottom",
- textStyle://图例文本样式
- {
- /*color: "rgb(255,255,255)",*/
- color:op.legendColor,//图例颜色
- baseline: "middle",
- align: "center",
- fontStyle: "normal",
- fontFamily:"微软雅黑",
- fontWeight: "normal",
- fontSize: 12
- },
- show:(function(){
- return op.show== undefined?true:op.show;
- })()//是否显示图例
- },
-
- toolbox: {
- show : true,//是否显示工具箱
- showTitle: true,
- orient: 'vertical',
- x: 'right',//水平居右
- y: 'center',//垂直居中
- feature : {
- restore : {show: true, readOnly: false,title : "刷新"},
- saveAsImage : {
- show: true,
- onClickStart:function(saveAsImage,option){
- //alert(JSON.stringify(saveAsImage));
- },
- onClickEnd:function(saveAsImage,option){
- //alert("保存结束");
- },
- backgroundColor:"#002050"
- }//保存图片
- },
- //设置时间轴
- dataZoom: {
- show: true,//显示时间轴
- start : 80//时间轴的默认起始时间点
- },
- textStyle:{//工具箱的文本样式
- color:"#FFFFFF"
- }
- },
- calculable : true,
- grid:
- {
- x: 65,
- y: 60,
- y2:55,
- x2:25,
- borderWidth:0,
- borderColor:"#808080",
- zlevel:2
- },
- timeLine:
- {
- show:true,
- zlevel:2
- },
-
- xAxis : [
- {
- type : 'category',
- data :op.xAxis,
- position: "bottom",
- nameTextStyle:
- {
- color: "rgb(255,255,255)",
- align: "center",
- baseline: "middle",
- fontSize: 12,
- fontStyle: "normal",
- fontWeight: "normal"
- },
- axisLine: {
- lineStyle: {
- type: "solid",
- width: 2,
- color: "#48b"
- },
- show: true
- },
- axisLabel: {
- interval: (function(){
- if(op.sArr[0].length<=8)return "auto";
- if(op.sArr[0].type=="line"){
- return Math.floor(op.sArr[0].data.length/8);
- }
- if(op.interval==undefined)return "auto";
- })(),
- textStyle: {
- color: op.xAxisColor,
- fontStyle: "normal",
- fontWeight: "normal",
- align: "center",
- baseline: "top",
- fontSize: 10,
- fontFamily:"微软雅黑"
- }
- },
- axisTick: {
- show: true
- },
- splitArea: {
- show: false
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "rgb(178, 178, 178)",
- width: 1
- }
- },
- nameLocation: "end"
-
- }
- ],
- yAxis : [
- {
- type: (
- function()
- {
- return op.value== undefined?"log": op.value;
- })(),
- /*min:1,*/
- min:20000,
- /* logLabelBase:"10",*/
- axisLabel: {
- textStyle: {
- color: op.yAxisColor,
- fontSize: 13,
- fontStyle: "normal",
- fontFamily:"微软雅黑",
- fontWeight: "normal",
- align: "right",
- baseline: "middle"
- }
- },
- splitLine: {
- lineStyle: {
- color: "rgb(178, 178, 178)",
- width: 1,
- type: "dashed"
- },
-
- show: true
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "#48b",
- width: 2
- }
- }
- }
- ],
- series :op.sArr,
- //背景颜色做测试使用,所有统计图做完后注释掉,改为透明背景
- /* backgroundColor: "rgb(25,39,53)"*/
- };
-
- return option;
- }
- /**
- * 饼图
- * @param op
- * @returns {___anonymous_option}
- */
- function getOption11(op){
- option={
- title: {
- show:true,
- text:op.title,
- x:"left",
- textStyle: {
- color: "#FFC000",
- fontSize: 14,
- fontStyle: "normal",
- fontFamily:"微软雅黑",
- fontWeight: "bolder",
- textAlign:"right",
- align: "right",
- baseline: "middle"
- },
- x: "left",
- subtext:op.subtext,
- subtextStyle: {
- color: "white",//#C00000
- textAlign:"right",
- fontSize: 16,
- fontStyle: "normal",
- fontWeight: "bolder",
- align: "right",
- baseline: "middle"
- }
- },
- tooltip : {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- legend: {
- orient : 'vertical',
- x : 'right',
- data:op.leArr,//图例数据
- y: "bottom",
- textStyle://图例文本样式
- {
- color: "rgb(255,255,255)",
- baseline: "middle",
- align: "center",
- fontStyle: "normal",
- fontFamily:"微软雅黑",
- fontWeight: "normal",
- fontSize: 12
- },
- show:(function(){
-
- return op.show== undefined?true:op.show;
- })(),//是否显示图例
- },
- toolbox: {
- show : true,//是否显示工具箱
- showTitle: true,
- orient: 'vertical',
- x: 'right',//水平居右
- y: 'center',//垂直居中
- feature : {
- restore : {show: true, readOnly: false,title : "刷新"},
- saveAsImage : {
- show: true,
- onClickStart:function(saveAsImage,option){
- //alert(JSON.stringify(saveAsImage));
- },
- onClickEnd:function(saveAsImage,option){
- //alert("保存结束");
- },
- backgroundColor:"#002050"
- }//保存图片
- },
- textStyle:{//工具箱的文本样式
- color:"#FFFFFF"
- }
- },
- calculable : true,
- series :op.sArr,
- //背景颜色做测试使用,所有统计图做完后注释掉,改为透明背景
- //backgroundColor: "rgb(25,39,53)"
- };
-
- return option;
- }
- function getEchart($dom,fn,op,myChart){
- if(myChart!=null){
- myChart.clear();
- }
- if(myChart==null){
- myChart = echarts.init($dom.get(0));
- }
- myChart.setOption(fn(op));
- /* window.onresize = myChart.resize;*/
- return myChart;
- }
|