坐标轴的反向ECharts Gallery

20:11:45图表已生成
代码
   var json = [{
       "name": "超保证水面线",
       "list": [{
           "name": "石鼓",
           "haiba": 4100,
           "value": 2000
       }, {
           "name": "攀枝花",
           "haiba": 3800,
           "value": 1080
       }, {
           "name": "寸滩",
           "haiba": 2800,
           "value": 560
       }, {
           "name": "三峡",
           "haiba": 2200,
           "value": 440
       }, {
           "name": "宜昌",
           "haiba": 1800,
           "value": 320
       }, {
           "name": "城陵矶",
           "haiba": 1500,
           "value": 260
       }, {
           "name": "汉口",
           "haiba": 900,
           "value": 200
       }, {
           "name": "九江",
           "haiba": 500,
           "value": 160
       }, {
           "name": "大通",
           "haiba": 300,
           "value": 140
       }]
   }, {
       "name": "超警戒水面线",
       "list": [{
           "name": "石鼓",
           "haiba": 4100,
           "value": 1900
       }, {
           "name": "攀枝花",
           "haiba": 3800,
           "value": 980
       }, {
           "name": "寸滩",
           "haiba": 2800,
           "value": 460
       }, {
           "name": "三峡",
           "haiba": 2200,
           "value": 340
       }, {
           "name": "宜昌",
           "haiba": 1800,
           "value": 220
       }, {
           "name": "城陵矶",
           "haiba": 1500,
           "value": 160
       }, {
           "name": "汉口",
           "haiba": 900,
           "value": 100
       }, {
           "name": "九江",
           "haiba": 500,
           "value": 60
       }, {
           "name": "大通",
           "haiba": 300,
           "value": 40
       }]
   }, {
       "name": "河道水面线",
       "list": [{
           "name": "石鼓",
           "haiba": 4100,
           "value": 1800
       }, {
           "name": "攀枝花",
           "haiba": 3800,
           "value": 880
       }, {
           "name": "寸滩",
           "haiba": 2800,
           "value": 360
       }, {
           "name": "三峡",
           "haiba": 2200,
           "value": 200
       }, {
           "name": "宜昌",
           "haiba": 1800,
           "value": 120
       }, {
           "name": "城陵矶",
           "haiba": 1500,
           "value": 60
       }, {
           "name": "汉口",
           "haiba": 900,
           "value": 10
       }, {
           "name": "九江",
           "haiba": 500,
           "value": 5
       }, {
           "name": "大通",
           "haiba": 300,
           "value": 2
       }]
   }];
   var chaobaozheng = [];
   var chaojingjie = [];
   var hedao = [];
   var names = [];

   function loadData(data) {
       data.map(function(item, i, arr) {
           if (item.name == '超保证水面线') {
               item.list.map(function(item, i, arr) {
                   var arr1 = [];
                   arr1.push(item.haiba);
                   arr1.push(item.value);
                   names.push(item.name)
                   chaobaozheng.push(arr1)
               })
           } else if (item.name == '超警戒水面线') {
               item.list.map(function(item, i, arr) {
                   var arr2 = [];
                   arr2.push(item.haiba);
                   arr2.push(item.value);
                   chaojingjie.push(arr2)
               })
           } else {
               item.list.map(function(item, i, arr) {
                   var arr3 = [];
                   arr3.push(item.haiba);
                   arr3.push(item.value);
                   hedao.push(arr3)
               })
           }
       })
   }
   loadData(json);
   var option = {
       backgroundColor: '#14314E',
       color: ['#DF9325', '#5FAD33', '#03A9A7'],
       tooltip: {
           trigger: 'axis',
           formatter: function(params) {
               var str = "";
               params.map(function(item, i, arr) {
                   str += item.seriesName;
                   str += ":";
                   str += item.data.value[1];
                   str += '</br>';
               })
               return str;
           },
           axisPointer: {
               lineStyle: {
                   color: '#325c80'
               }
           }
       },
       legend: {
           show: true,
           right: 'left',
           itemWidth: 24,
           itemHeight: 8,
           textStyle: {
               color: '#CCFFFF'
           },
           data: [{
               name: "超保证水面线"
           }, {
               name: "超警戒水面线"
           }, {
               name: "河道水面线"
           }]
       },
       grid: {
           left: '3%',
           right: '6%',
           bottom: '3%',
           containLabel: true
       },
       xAxis: [{
               type: 'value',
               name: "",
               boundaryGap: false,
               splitNumber: 10,
               min: 0,
               max: 4200,
               inverse: false,
               show: false,
           },
           {
               type: 'value',
               name: "",
               boundaryGap: false,
               splitNumber: 10,
               min: 0,
               max: 4200,
               inverse: true,
               position: 'bottom',
               axisLabel: {
                   margin: 10,
                   formatter: function(value, index) {
                       if (value === 0) {
                           return 0 + '    千米';
                       } else {
                           return value;
                       }
                   },
                   textStyle: {
                       fontSize: 14
                   }
               },
               axisLine: {
                   show: true,
                   lineStyle: {
                       color: '#2EBBEC'
                   }
               },
               axisTick: {
                   show: true
               },
               splitLine: {
                   show: false
               }
           }
       ],
       yAxis: [{
           type: 'value',
           name: "水位（米）",
           min: 0,
           max: 2500,
           splitNumber: 5,
           axisTick: {
               show: true
           },
           axisLine: {
               show: true,
               lineStyle: {
                   color: '#2EBBEC'
               }
           },
           axisLabel: {
               show: true,
               //margin: 10,
               textStyle: {
                   fontSize: 14
               }
           },
           splitLine: {
               show: false
           }
       }],
       series: [{
           name: '超保证水面线',
           type: 'line',
           xAxisIndex: 1,
           yAxisIndex: 0,
           smooth: true,
           symbol: 'circle',
           symbolSize: 5,
           showSymbol: false,
           silent: true,
           itemStyle: {
               normal: {
                   color: '#DF9325'
               },
           },
           lineStyle: {
               normal: {
                   //color:'#DF9325',
                   type: 'dashed',
                   width: 3
               }
           },
           label: {
               normal: {
                   show: true,
                   position: [0, -30],
                   offset: [0, 0],
                   formatter: '{b}',
                   textStyle: {
                       color: "#CCFFFF"
                   },
               }
           },
           markArea: {
               silent: true,
               itemStyle: {
                   normal: {
                       color: "#434344",
                       opacity: 0.9
                   },
               },
               data: [
                   [{
                       name: '',
                       xAxis: 2400
                   }, {
                       xAxis: 1500
                   }]
               ]
           },
           areaStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                       offset: 0,
                       color: 'rgba(137, 189, 27, 0.3)'
                   }, {
                       offset: 0.8,
                       color: 'rgba(137, 189, 27, 0)'
                   }], false),
                   shadowColor: 'rgba(0, 0, 0, 0.1)',
                   shadowBlur: 10
               }
           },
           data: [{
               value: chaobaozheng[0],
               //name: names[0]
           }, {
               value: chaobaozheng[1],
               //name: names[1]
           }, {
               value: chaobaozheng[2],
               //name: names[2]
           }, {
               value: chaobaozheng[3],
               //name: names[3]
           }, {
               value: chaobaozheng[4],
               //name: names[4]
           }, {
               value: chaobaozheng[5],
               //name: names[5]
           }, {
               value: chaobaozheng[6],
               //name: names[6]
           }, {
               value: chaobaozheng[7],
               //name: names[7]
           }, {
               value: chaobaozheng[8],
               //name: names[8]
           }]
       }, {
           name: '超警戒水面线',
           type: 'line',
           xAxisIndex: 1,
           yAxisIndex: 0,
           smooth: true,
           symbol: 'circle',
           symbolSize: 5,
           showSymbol: false,
           silent: true,
           itemStyle: {
               normal: {
                   color: '#5FAD33'
               },
           },
           lineStyle: {
               normal: {
                   //color:'#5FAD33',
                   type: 'dashed',
                   width: 3
               }
           },
           markArea: {
               silent: true,
               itemStyle: {
                   normal: {
                       color: "#3E2D43",
                       opacity: 0.9
                   },
               },
               data: [
                   [{
                       name: '',
                       xAxis: 1500
                   }, {
                       xAxis: 1100
                   }]
               ]
           },
           areaStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                       offset: 0,
                       color: 'rgba(0, 136, 212, 0.3)'
                   }, {
                       offset: 0.8,
                       color: 'rgba(0, 136, 212, 0)'
                   }], false),
                   shadowColor: 'rgba(0, 0, 0, 0.1)',
                   shadowBlur: 10
               }
           },
           data: [{
               value: chaojingjie[0],
               //name: names[0]
           }, {
               value: chaojingjie[1],
               //name: names[1]
           }, {
               value: chaojingjie[2],
               //name: names[2]
           }, {
               value: chaojingjie[3],
               //name: names[3]
           }, {
               value: chaojingjie[4],
               //name: names[4]
           }, {
               value: chaojingjie[5],
               //name: names[5]
           }, {
               value: chaojingjie[6],
               //name: names[6]
           }, {
               value: chaojingjie[7],
               //name: names[7]
           }, {
               value: chaojingjie[8],
               //name: names[8]
           }]
       }, {
           name: '河道水面线',
           type: 'line',
           xAxisIndex: 1,
           yAxisIndex: 0,
           smooth: true,
           symbol: 'circle',
           symbolSize: 5,
           showSymbol: false,
           silent: true,
           itemStyle: {
               normal: {
                   color: '#03A9A7'
               },
           },
           lineStyle: {
               normal: {
                   //color: "#03A9A7",
                   width: 3
               }
           },
           markPoint: {
               symbolOffset: [0, -40],
               silent: true,
               label: {
                   normal: {
                       position: "insideTop",
                       formatter: function(params) {
                           var param = params.data;
                           var name = param.name;
                           var value = param.coord[1].toString();
                           if (value.length > 6) {
                               return value.slice(0, 3) + "\n" + value.slice(3, 6) + "\n" + value.slice(6) + "\n" + "\n" + name + '\n' + '|' + '\n' + '|';
                           } else if (value.length > 3) {
                               return value.slice(0, 3) + "\n" + value.slice(3) + "\n" + "" + "\n" + name + '\n' + '|' + '\n' + '|';
                           } else {
                               return value + "\n" + "" + "\n" + "" + "\n" + name + '\n' + '|' + '\n' + '|';
                           }
                       },
                       textStyle: {
                           color: '#CCFFFF',
                       }
                   }
               },
               itemStyle: {
                   normal: {
                       color: "#009DD9"
                   },
               },
               data: [{
                   coord: hedao[0],
                   name: names[0],
                   itemStyle: {
                       normal: {
                           color: "#009DD9"
                       },
                   },
               }, {
                   coord: hedao[1],
                   name: names[1],
                   itemStyle: {
                       normal: {
                           color: "#009DD9"
                       },
                   },
               }, {
                   coord: hedao[2],
                   name: names[2],
                   itemStyle: {
                       normal: {
                           color: "#009DD9"
                       },
                   },
               }, {
                   coord: hedao[3],
                   name: names[3],
                   itemStyle: {
                       normal: {
                           color: "#FF8B21"
                       },
                   },
               }, {
                   coord: hedao[4],
                   name: names[4],
                   itemStyle: {
                       normal: {
                           color: "#FF8B21"
                       },
                   },
               }, {
                   coord: hedao[5],
                   name: names[5],
                   itemStyle: {
                       normal: {
                           color: "#E71F19"
                       },
                   },
               }, {
                   coord: hedao[6],
                   name: names[6],
                   itemStyle: {
                       normal: {
                           color: "#009DD9"
                       },
                   },
               }, {
                   coord: hedao[7],
                   name: names[7],
                   itemStyle: {
                       normal: {
                           color: "#009DD9"
                       },
                   },
               }, {
                   coord: hedao[8],
                   name: names[8],
                   itemStyle: {
                       normal: {
                           color: "#009DD9"
                       },
                   },
               }]
           },
           markLine: {
               symbol: "arrow",
               label: {
                   normal: {
                       show: true,
                       position: 'middle',
                       textStyle: {
                           color: '#B5F8F9',
                       }
                   }
               },
               lineStyle: {
                   normal: {
                       color: "#6B7D90",
                       width: 2,
                       type: "solid"
                   }
               },
               data: [
                   [{
                       name: '上游',
                       coord: [4200, 2500]
                   }, {
                       coord: [2000, 2500]
                   }],
                   [{
                       name: '中游',
                       coord: [2000, 2500]
                   }, {
                       coord: [900, 2500]
                   }],
                   [{
                       name: '下游',
                       coord: [900, 2500]
                   }, {
                       coord: [0, 2500]
                   }]
               ]
           },
           areaStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                       offset: 0,
                       color: 'rgba(219, 50, 51, 0.3)'
                   }, {
                       offset: 0.8,
                       color: 'rgba(219, 50, 51, 0)'
                   }], false),
                   shadowColor: 'rgba(0, 0, 0, 0.1)',
                   shadowBlur: 10
               }
           },
           data: [{
               value: hedao[0],
               //name: names[0]
           }, {
               value: hedao[1],
               //name: names[1]
           }, {
               value: hedao[2],
               //name: names[2]
           }, {
               value: hedao[3],
               name: names[3]
           }, {
               value: hedao[4],
               //name: names[4]
           }, {
               value: hedao[5],
               //name: names[5]
           }, {
               value: hedao[6],
               //name: names[6]
           }, {
               value: hedao[7],
               //name: names[7]
           }, {
               value: hedao[8],
               //name: names[8]
           }]
       }]
   };
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
