Echarts图表样式调整|| 自动滚动效果||防遮挡

因页面有些地方使用的Echarts图表控件样式上和我们想要的功能上的问题,需要调整,如图:

故进行修改,修改后的图片:

Echarts图表样式调整|| 自动滚动效果||防遮挡_第1张图片

主要修改了的样式,详情见代码标注
柱状图(文字换行倾斜)源码如下:

var option_sevenWG = {
                      color: colors,
                      /*tooltip : {
                          trigger: 'axis',
                          axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                              type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                          }
                      },*/
                      grid: {//调整上下左右间距
                          left: '4%',
                          right: '4%',
                          top:'20%',
                          bottom: '15%',
                          containLabel: true
                      },
                      xAxis : [
                          {
                              type : 'category',
                              axisTick: {// 去除坐标轴上的刻度线
                                  //alignWithLabel: true
                                  show: false
                              },
                              axisLine: {// x轴的颜色和宽度
                                  show: false, 
                                  lineStyle: {
                                      color: colors, // x坐标轴的轴线颜色
                                      //width:3    //这里是坐标轴的宽度,可以去掉
                                  }
                              },
                              axisLabel: {// x轴的字体样式
                                  show: true,    //这行代码控制着坐标轴x轴的文字是否显示
                                  textStyle: {
                                      //color: '#fff',   //x轴上的字体颜色
                                      fontSize:'0.5vw'    // x轴字体大小
                                  },
                                  interval:0,//文字显示不全并将文字倾斜
                                  rotate:45, //倾斜的角度
                                  formatter:function(value)  
                                     {  
                                         //debugger  
                                         var ret = "";//拼接加\n返回的类目项  
                                         var maxLength = 5;//每项显示文字个数  
                                         var valLength = value.length;//X轴类目项的文字个数  
                                         var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                                         if (rowN > 1)//如果类目项的文字大于3,  
                                         {  
                                             for (var i = 0; i < rowN; i++) {  
                                                 var temp = "";//每次截取的字符串  
                                                 var start = i * maxLength;//开始截取的位置  
                                                 var end = start + maxLength;//结束截取的位置  
                                                 //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧  
                                                 temp = value.substring(start, end) + "\n";  
                                                 ret += temp; //凭借最终的字符串  
                                             }  
                                             return ret;  
                                         }  
                                         else {  
                                             return value;  
                                         }  
                                     } 

                              },
                              data : KSMC//['1', '2', '3', '4', '5', '6', '7']
                          }
                      ],
                      dataZoom: [//滑动条
                           { 
                               xAxisIndex: 0,//这里是从X轴的0刻度开始
                               show:false,//是否显示滑动条,不影响使用
                               type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                               startValue: 0, // 从头开始。
                               endValue: 9  // 一次性展示10个。
                           }
                      ],
                      yAxis : [
                          {
                              type : 'value',
                              //minInterval:1,//最小数为1,避免刻度出现小数情况
                              axisTick: {// 去除坐标轴上的刻度线
                                  //alignWithLabel: true
                                  show: false
                              },
                              splitLine: {// 控制网格线是否显示
                                      //show: false,   // 网格线是否显示
                                      lineStyle: {//  改变样式
                                          width:'0.2',
                                          color: '#507b7d'   // 修改网格线颜色    
                                      }                            
                              },
                              axisLine: {// y轴的颜色和宽度
                                  show: false, 
                                  lineStyle: {
                                      color: colors, // y坐标轴的轴线颜色
                                  }
                              },
                              axisLabel: {// y轴的字体样式
                                show: true,    //这行代码控制着坐标轴y轴的文字是否显示
                                  textStyle: {
                                      //color: '#fff',   //y轴上的字体颜色
                                      fontSize:'0.5vw'    // y轴字体大小
                                  }
                              }
                          }
                      ],
                      series : [
                          {
                              type:'bar',
                              barWidth:'28%',
                              data:CS//[10, 52, 200, 334, 390, 330, 220]
                          }
                      ]
                  };

自动滚动效果是依赖于Echarts自带滑动条实现的:
除了在option里加dataZoom属性
还需要在绑定的地方这样写

var myChart_sevenWG = echarts.init(document.getElementById("echarts_sevenWG"));
                myChart_sevenWG.hideLoading();//滑动条需要的,具体干啥的不知道
                myChart_sevenWG.setOption(option_sevenWG);
                // 定时器
                setInterval(function() {
                // 每次向后滚动一个,最后一个从头开始。
                if(option_sevenWG.dataZoom[0].endValue == KSMC.length - 1)
                {
                option_sevenWG.dataZoom[0].endValue = 9;
                option_sevenWG.dataZoom[0].startValue = 0;
                }
                else{
                option_sevenWG.dataZoom[0].endValue = option_sevenWG.dataZoom[0].endValue + 1;
                option_sevenWG.dataZoom[0].startValue = option_sevenWG.dataZoom[0].startValue + 1;
                }
                myChart_sevenWG.setOption(option_sevenWG);
                }, 2000);

看源码可知,这个方法有一个弊端,因为是捕获当目前展示的最后一个数字所在位置为数组长度减一(最后一个)时,将展示数字的值换掉,从头展示,我们目前设置的是展示10个,但如果展示的数组个数小于设置的个数时,就永远都捕获不到了

饼图源码,里面注解文字很多的是防文字遮挡的:

(插播:颜色的获取通过一个很好用的取色器:用了好久了,很棒)

var option_wglx = {
                      //color:['#E39B86','#C7645F','#995f5b','#EA7E53','#DECE72','#91CA8C','#7AA576','#6CAAAD','#7188AA','#beb7bb'],//较暗10色,可在此处自己定义颜色
                      //color:['#37A2DA','#67D2EC','#8EE5E8','#9FE6B8','#FEDD6A','#FD9F8D','#FA7D9B','#E062AE','#E690D1','#E7BCF3'],//.reverse(),//亮10色,可在此处自己定义颜色
                      color:['#9ACD32','#FFFF00','#FF8C00','#FF0000','#97FFFF','#0000CD','#68228B','#FFFFFF','#FFAEB9','#005737'],//自己定义颜色
                      /*tooltip : {
                          trigger: 'item',
                          formatter: "{b} : {c} ({d}%)"
                      },*/
                      series : [
                          {
                              name: '违规类型',
                              type: 'pie',
                              clickable:false,       //是否开启点击
                              minAngle: 6,              //最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互
                              avoidLabelOverlap: true,   //是否启用防止标签重叠策略
                              hoverAnimation:false,    //是否开启 hover 在扇区上的放大动画效果。
                              silent: true,        //图形是否不响应和触发鼠标事件
                              radius : '45%',
                              label: {
                                  normal: {
                                      formatter: ' {b}:{c}  {d}%  ',
                                      color: '#4BBAD1',
                                      rich: {
                                          b: {
                                              color: '#4BBAD1',
                                              fontSize: 1
                                          },
                                          per: {
                                              color: '#4BBAD1',
                                              padding: [2, 4],
                                              borderRadius: 2
                                          }
                                      },
                                      formatter(v) {//字符过长换行
                                          let text =  v.percent+'% ' +v.name
                                          if(text.length <= 6)
                                          {
                                              return text;
                                          }else if(text.length > 6 && text.length <= 12){
                                              return text = `${text.slice(0,6)}\n${text.slice(6)}`
                                          }else if(text.length > 12 && text.length <= 18){
                                              return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12)}`
                                          }else if(text.length > 18 && text.length <= 24){
                                              return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12,18)}\n${text.slice(18)}`
                                          }else if(text.length > 24){
                                              return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12,18)}\n${text.slice(18,24)}\n${text.slice(24)}`
                                          }
                                      },
                                      textStyle : {//设置字体大小
                                          fontSize : '0.4vw'
                                      }

                                      //结束
                                  }
                              },
                              center: ['50%', '53%'],
                              data: WG_WGLX,
                              itemStyle: {
                                  emphasis: {
                                      shadowBlur: 10,
                                      shadowOffsetX: 0,
                                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                                  }
                              }
                          }
                      ]
                  };
                  /*[
                                  {value:335, name:'内科'},
                                  {value:310, name:'外科'},
                                  {value:234, name:'妇产科'},
                                  {value:135, name:'皮肤科'},
                                  {value:248, name:'骨科'},
                                  {value:335, name:'儿科一病区'},
                                  {value:310, name:'儿科二病区'},
                                  {value:234, name:'精神科一病区'},
                                  {value:135, name:'五官科'},
                                  {value:248, name:'其他'}
                              ]*/

就是这样了,后续如果写了,图标滚动展示/切换效果会再写的

你可能感兴趣的:(前端)