1 //泵机带图
  2     function getBjData(jsonData){
  3 
  4         let colorTypes = {
  5             "运行":{
  6                 color:"#52c736"
  7             },
  8             "报警":{
  9                 color:"#ec2c12"
 10             },
 11             "停止":{
 12                 color:"#0941ec"
 13             }
 14         };
 15         let data = [];
 16         $.each(jsonData,function(index,value){
 17             for(let i=0;i<value.length;i++){
 18 
 19                 let curValue = value[i];
 20 
 21                 let curName = curValue['name'];
 22 
 23                 let color = colorTypes[curName];
 24 
 25                 let colorStyle = {};
 26                 colorStyle["normal"] = color;
 27 
 28                 let curValue1 = curValue['value'];
 29 
 30                 curValue['value'] = curValue1;
 31 
 32                 // let itemStyle = {};
 33                 // itemStyle["itemStyle"] =colorStyle;
 34 
 35                 curValue["itemStyle"] = colorStyle;
 36 
 37                 data.push(curValue);
 38             }
 39         });
 40 
 41         return data;
 42     }
 43 
 44     function getBjOption(jsonData){
 45 
 46         let  data = [];
 47         let  categories =Object.keys(jsonData).reverse();
 48 
 49         data = getBjData(jsonData);
 50 
 51         console.log(data);
 52 
 53         function renderItem(params, api) {
 54             let categoryIndex = api.value(0);
 55             let start = api.coord([api.value(1), categoryIndex]);
 56             let end = api.coord([api.value(2), categoryIndex]);
 57             let height = api.size([0, 1])[1] * 0.6;
 58 
 59             let rectShape = echarts.graphic.clipRectByRect({
 60                 x: start[0],
 61                 y: start[1] - height / 2,
 62                 width: end[0] - start[0],
 63                 height: height
 64             }, {
 65                 x: params.coordSys.x,
 66                 y: params.coordSys.y,
 67                 width: params.coordSys.width,
 68                 height: params.coordSys.height
 69             });
 70 
 71             return rectShape && {
 72                 type: 'rect',
 73                 shape: rectShape,
 74                 style: api.style()
 75             };
 76         }
 77 
 78         let option = {
 79             tooltip: {
 80                 formatter: function (params) {
 81                     return params.marker + params.name + ': ' + params.value[3] + ' H';
 82                 }
 83             },
 84             // title: {
 85             //     text: title,
 86             //     left: 'center'
 87             // },
 88             dataZoom: [{
 89                 type: 'slider',
 90                 filterMode: 'weakFilter',
 91                 showDataShadow: false,
 92                 top: 400,
 93                 height: 10,
 94                 borderColor: 'transparent',
 95                 backgroundColor: '#e2e2e2',
 96                 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', // jshint ignore:line
 97                 handleSize: 20,
 98                 handleStyle: {
 99                     shadowBlur: 6,
100                     shadowOffsetX: 1,
101                     shadowOffsetY: 2,
102                     shadowColor: '#aaa'
103                 },
104                 labelFormatter: ''
105             }, {
106                 type: 'inside',
107                 filterMode: 'weakFilter'
108             }],
109             grid: {
110                 height: 300
111             },
112             xAxis: {
113                 min: 0,
114                 max: 24,
115                 //scale: true,
116                 //inverse: true,
117                 axisLabel: {
118                     formatter: function (val) {
119                         return val;
120                         //return Math.max(0, val - 24) + ' H';
121                     }
122                 }
123             },
124             yAxis: {
125                 data: categories
126             },
127             series: [{
128                 type: 'custom',
129                 renderItem: renderItem,
130                 itemStyle: {
131                     opacity: 1
132                 },
133                 encode: {
134                     x: [1, 2],
135                     y: 0
136                 },
137                 data: data
138             }]
139         };
140         return option;
141     }
142 
143     function setBjdtTabChart(id,stationNum) {
144 
145         $.getJSON(pngPath + "data/bengfang.json", function (jsonData) {
146 
147                 let bjJson = jsonData["泵机带图"];
148             
149                 let myChart = echarts.init(document.getElementById(id));
150 
151                 let option = getBjOption(bjJson);
152 
153                 // 使用刚指定的配置项和数据显示图表。
154                 myChart.setOption(option);
155 
156             });
157     };