今天是:
带着程序的旅程,每一行代码都是你前进的一步,每个错误都是你成长的机会,最终,你将抵达你的目的地。
title

echart3 多条线对应多条y轴

横坐标数据相同,单纵坐标值不同的实现方式,效果图

   //echarts.init(document.getElementById('main')).dispose();//销毁前一个实例
   var myChart = echarts.init(document.getElementById('main'));
   var colors = [ '#5793f3', '#d14a61', '#675bba', '#c04aab',  '#a6c30f'];
   jp.get("${ctx}${dataURL}?tagName=${tagName}&bightType="+bightType, function (res) {
       debugger;
       option = {
           color : colors,
           tooltip : {
               trigger: 'axis',
               axisPointer: {
                   type: 'cross'
               }
           },
           grid: {
               right: '20%',
           },
           toolbox : {
               feature : {
                   dataView : {
                       show : false,
                       readOnly : false
                   },
                   restore : {
                       show : false
                   },
                   saveAsImage : {
                       show : false
                   }
               }
           },
           legend : {
               data : res.legend
           },
           xAxis : [ {
              axisTick: {
                   alignWithLabel: true
               },
               boundaryGap: true,
axisLabel:{
                   interval: res.x.length,
                   showMinLabel: true,
                   showMaxLabel: true
               },
               type : 'category',
               data : res.x,
           } ],
           yAxis : [ {
               type : 'value',
               name : res.legend[0],
               position : 'left',
               splitLine:{
                   show:false
               },
               boundaryGap: ['10%', '10%'],
               scale: true,
               axisLine : {
                   lineStyle : {
                       color : colors[0]
                   }
               },
               axisLabel : {
                   formatter : '{value}'
               }
           }, {
               type : 'value',
               name : res.legend[1],
               position : 'left',
               offset : 50,
               splitLine:{
                   show:false
               },
               boundaryGap: ['10%', '10%'],
               scale: true,
               axisLine : {
                   lineStyle : {
                       color : colors[1]
                   }
               },
               axisLabel : {
                   formatter : '{value}'
               }
           }, {
               type : 'value',
               name : res.legend[2],
               position : 'right',
               splitLine:{
                   show:false
               },
               axisLine : {
                   lineStyle : {
                       color : colors[2]
                   }
               },
               boundaryGap: ['10%', '10%'],
               scale: true,
               axisLabel : {
                   formatter : '{value}'
               }
           } ,  {
               type : 'value',
               name : res.legend[3],
               position : 'right',
               offset : 50,
               splitLine:{
                   show:false
               },
               boundaryGap: ['10%', '10%'],
               scale: true,
               axisLine : {
                   lineStyle : {
                       color : colors[3]
                   }
               },
               axisLabel : {
                   formatter : '{value}'
               }
           } , {
               type : 'value',
               name : res.legend[4],
               position : 'right',
               offset : 120,
               // min:'dataMIn', max:'dataMax',
               boundaryGap: ['10%', '10%'],
               scale: true,
               splitLine:{
                   show:false
               },
               axisLine : {
                   lineStyle : {
                       color : colors[4]
                   }
               },
               axisLabel : {
                   formatter : '{value}'
               }
           }],
           series : [
               {
                   name : res.legend[0],
                   type : 'line',
                   data : res.ys[0]
               },
               {
                   name : res.legend[1],
                   type : 'line',
                   yAxisIndex : 1,
                   data : res.ys[1]
               },
               {
                   name : res.legend[2],
                   type : 'line',
                   yAxisIndex : 2,
                   data : res.ys[2]
               } ,
               {
                   name : res.legend[3],
                   type : 'line',
                   yAxisIndex : 3,
                   data :res.ys[3]
               }  ,
               {
                   name : res.legend[4],
                   type : 'line',
                   yAxisIndex : 4,
                   data :res.ys[4]
               }]
       };
       myChart.resize();
       myChart.setOption(option);
   });

后台数据结构

String xValue[] =new String[1];
List<String[]> ys= new ArrayList<>();
String[] legend= new String[n];
result.put("legend",legend);
result.put("x",xValue);//x轴
result.put("ys",ys);//y轴
分享到:

专栏

类型标签

网站访问总量