dataZoomECharts Gallery

20:11:45图表已生成
代码
 var maxLength = 0;
 var depetname = "['惠南','宣桥','北蔡','新场','高桥','康桥','祝桥','南汇新城','川沙','大团','周浦','三林','金桥','金杨','陆家嘴','沪东','张江','花木','洋泾','潍坊','曹路','南码头','书院','上钢','高东','高行','东明','合庆','周家渡','航头','浦兴','万祥','老港','泥城','唐镇','塘桥']";
 var cqzb = "[861,316,249,212,208,196,178,141,107,92,87,85,84,79,51,49,48,47,42,35,32,28,23,23,16,16,15,11,10,6,5,4,3,2,2,1]";
 var jjcq = "[74,63,39,28,44,120,51,6,57,21,54,36,16,9,4,16,56,38,21,7,23,5,8,24,18,4,19,20,2,36,9,2,8,0,9,15]";
 var zczb = "[255,128,259,130,136,571,104,26,185,92,214,264,40,62,54,69,202,126,48,162,74,91,60,92,28,64,118,33,65,127,85,47,38,35,60,87]";
 var colNames = eval('(' + depetname + ')');
 var data1 = eval('(' + cqzb + ')');

 var data2 = eval('(' + jjcq + ')');

 var data3 = eval('(' + zczb + ')');

 //获取Y轴数据中字数最大长度
 colNames.forEach(function(val, index) {
     if (maxLength < val.length) {
         maxLength = val.length;
     }
 });

 //根据超期在办升序
 var arry = [];
 var shortEchartsData = {
     name: '',
     cqzb: 0,
     jjcq: 0,
     zczb: 0
 };
 data1.forEach(function(val, index) {
     shortEchartsData = {
         name: colNames[index],
         cqzb: data1[index],
         jjcq: data2[index],
         zczb: data3[index],
     };
     arry.push(shortEchartsData);
 });
 arry.sort(function(a, b) {
     return a.cqzb - b.cqzb
 });
 colNames = [], data1 = [], data2 = [], data3 = [];
 arry.forEach(function(item, index) {
     colNames.push(item.name);
     data1.push(item.cqzb);
     data2.push(item.jjcq);
     data3.push(item.zczb);
 });


 option = {
     title: {
         text: 'Awesome Chart'
     },
     textStyle: {
         fontSize: 13
     },
     //提示框组件
     tooltip: {
         trigger: "axis", //触发类型
         axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
         }
     },
     toolbox: {
         show: true,
         feature: {
             dataView: {
                 readOnly: false
             },
             restore: {},
         }
     },
     //缩放组件
     dataZoom: [{
         show: true,
         type: "slider", //slider 有单独的滑动条，用户在滑动条上进行缩放或漫游
         orient: "vertical",
         right: "3%",
         yAxisIndex: 0, //组件控制的 y轴
         filterMode: 'empty', //filter weakFilter empty none
         realtime: false, //拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新
         borderColor: 'transparent',
         backgroundColor: '#e2e2e2',
         handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
         handleSize: 20,
         handleStyle: {
             shadowBlur: 6,
             shadowOffsetX: 1,
             shadowOffsetY: 2,
             shadowColor: '#aaa'
         },
         showDataShadow: false,
         width: 10,
         startValue: colNames.length <= 9 ? 0 : colNames.length - 9,
         endValue: colNames.length - 1, //9,
         labelFormatter: function(params) {
             return colNames[params]
         }
     }, {
         type: "inside", // inside 内置于坐标系中，可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
         yAxisIndex: 0,
         filterMode: 'empty',
         realtime: false,
         //startValue: colNames.length <= 9 ? 0 : Math.floor(colNames.length / 4) * 3,// 0,
         //endValue: colNames.length - 1,//9,
     }],
     //图例组件:展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
     legend: {
         type: "plain", //
         align: "left", //图例标记和文本的对齐
         left: "center",
         top: 2,
         data: ["超期在办", "即将超期", "正常在办"]
     },
     //直角坐标系网格
     grid: {
         show: false, //是否显示直角坐标系网格  default: false 
         top: 38,
         bottom: 50,
         left: maxLength > 4 ? 90 : 62,
         right: "15%",
         containLable: true, //区域是否包含坐标轴的刻度标签
     },
     //直角坐标系 grid 中的 x 轴
     xAxis: {
         type: "value", //坐标轴类型 value 数值轴\category 类目轴\time 时间轴\log 对数轴
         axisLabel: { //坐标轴刻度标签相关设置
             fontWeight: "bolder", //字体粗细
             fontSize: 13 //字体大小
         },
         axisLine: {
             lineStyle: {
                 color: "#008ACD"
             }
         },

         splitNumber: 5,
     },
     //直角坐标系 grid 中的 y 轴
     yAxis: {
         type: "category",
         axisLabel: { //坐标轴刻度标签相关设置
             fontWeight: "bolder", //字体粗细
             fontSize: 13, //字体大小
             formatter: function(itemValue) {
                 return itemValue.length > 5 ? (itemValue.substring(0, 5) + '...') : itemValue
             }
         },
         axisLine: {
             lineStyle: {
                 color: "#008ACD"
             }
         },
         data: colNames,
     },
     //系列列表
     series: [{
         type: "bar",
         name: "超期在办",
         barWidth: 19,
         barMinHeight: 14,
         stack: "统计",
         itemStyle: {
             normal: {
                 color: "#E7536B",
                 borderWidth: 0,
                 barBorderRadius: 6
             }
         },
         label: {
             normal: {
                 show: true,
                 position: "inside",
                 color: "#0868A4",
                 fontSize: 14
             }
         },
         data: data1
     }, {
         type: "bar",
         name: "即将超期",
         barWidth: 19,
         stack: "统计",
         barMinHeight: 14,
         itemStyle: {
             normal: {
                 color: "#FFCC66",
                 borderWidth: 0,
                 barBorderRadius: 6,
             }
         },
         label: {
             normal: {
                 show: true,
                 position: "inside",
                 color: "#0868A4",
                 fontSize: 14
             }
         },
         data: data2
     }, {
         type: "bar",
         name: "正常在办",
         barWidth: 19,
         stack: "统计",
         barMinHeight: 14,

         itemStyle: {
             normal: {
                 color: "#81D740",
                 borderWidth: 0,
                 barBorderRadius: 6,
             }
         },
         label: {
             normal: {
                 show: true,
                 position: "inside",
                 color: "#0868A4",
                 fontSize: 14
             }
         },
         data: data3
     }]
 };

 //  //添加缩放事件，根据当前可视区域内的最大值来调整x轴的最大值
 //  mychart.on("dataZoom", function(params) {
 //      var Option = mychart.getOption();
 //      var dz = Option.dataZoom[0];
 //      var start = dz.startValue;
 //      var end = dz.endValue;

 //      var maxData = 0;
 //      var arry1 = data1.slice(start, end + 1);
 //      var arry2 = data2.slice(start, end + 1)
 //      var arry3 = data3.slice(start, end + 1)
 //      var max = 0;
 //      for (var i = 0; i < arry1.length; i++) {
 //          if (maxData < arry1[i] + arry2[i] + arry3[i]) {
 //              maxData = arry1[i] + arry2[i] + arry3[i]
 //          }
 //      }


 //      mychart.setOption({
 //          xAxis: {
 //              max: maxData + 14,
 //              splitNumber: 5,
 //          }
 //      });
 //  });
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
