Echarts 曲线图各个属性的使用

先展示一下效果图:

js代码：

///数据可以随机获取 
      var xsarr = new Array(20);//x轴
       var tgyl = new Array(20);//套管压力
        var tgpl = new Array(20);//套管排量
        var tgzyl = new Array(20);//套管总液量
        var tgzsl = new Array(20);//套管总砂量
        var tgsnd = new Array(20);//套管砂浓度
        var tgsb = new Array(20);//套管砂比 


var dom = document.getElementById('div1');
       var colors = ["red", "blue", "#B15BFF", "#6F00D2", "black", "#005AB5"];
       var titles = ['套管压力（MPa）', '套管排量(m3/min)', '套管总液量(m3)', '套管总砂量(m^3)', '套管砂浓度(kg/m^3)', '套管砂比(%)'];
       option = {
           title: {
               text: jhbm + '压裂',
               textStyle: {
                    fontSize:22,
               }
           },
           tooltip: {
               trigger: 'axis',
               axisPointer: {
                    type: 'cross'
               }
           },
           color: colors,
           legend: {
               data: titles,//['套管压力（MPa）', '套管排量(m3/min)', '套管总液量(m3)', '套管总砂量(m^3)', '套管砂浓度(kg/m^3)', '套管砂比(%)'],
                icon: "roundRect",
           },
           grid: {
                left: '4%',
                right: '4%',
                bottom: '10%',
                containLabel: true
           },
           toolbox: {
               //feature: {
               //     saveAsImage: {}
               // }
               show: true,
               feature: {
                   dataZoom: {
                       yAxisIndex:[0,1,2,3,4,5]
                   },
                   magicType: { type: ['line', 'bar'] },
                   dataView: { show: true, readOnly: false },
                   restore: { show: true },
                   saveAsImage: { show: true }
               }
           },
           xAxis: [{
               type: 'category',
               axisTick: {
                   alignWithLabel: true
               },
               //boundaryGap: false,
               data: xsarr    //[0, 20, 40, 60, 80, 100, 120, 140, 160, 180]
           }],

           yAxis: [
          {
              type: 'value',
              //name: '套管压力（MPa）',
              position: 'left',
              axisLine: {
                  lineStyle: {
                      color: colors[0]
                  }
              },
              axisLabel: {
                  formatter: '{value} '
              }
          },
           {
               type: 'value',
              // name: '套管排量(m3/min)',
               position: 'left',
               offset: 45,
               axisLine: {
                   lineStyle: {
                       color: colors[1]
                   }
               },
               axisLabel: {
                   formatter: '{value} '
               }
           },
          {
              type: 'value',
              //name: '套管总液量(m3)',
              position: 'left',
              offset: 90,
              axisLine: {
                  lineStyle: {
                      color: colors[2]
                  }
              },
              axisLabel: {
                  formatter: '{value} '
              }
          },
          {
              type: 'value',
             // name: '套管总砂量(m^3)',
              position: 'right',
              axisLine: {
                  lineStyle: {
                      color: colors[3]
                  }
              },
              axisLabel: {
                  formatter: '{value} '
              }
          }
          ,
          {
              type: 'value',
              //name: '套管砂浓度(kg/m^3)',
              position: 'right',
              offset: 45,
              axisLine: {
                  lineStyle: {
                      color: colors[4]
                  }
              },
              axisLabel: {
                  formatter: '{value} '
              }
          }
          ,
          {
              type: 'value',
             // name: '套管砂比(%)',
              position: 'right',
              offset: 90,
              axisLine: {
                  lineStyle: {
                      color: colors[5]
                  }
              },
              axisLabel: {
                  formatter: '{value} '
              }
          }
           ],

           //增加坐标轴的缩放
           //dataZoom: [{
           //    type: 'inside',
           //    start: 0,
           //    end: 10
           //}, {
           //    start: 0,
           //    end: 10,
           //    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.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.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
           //    handleSize: '80%',
           //    handleStyle: {
           //        color: '#fff',
           //        shadowBlur: 3,
           //        shadowColor: 'rgba(0, 0, 0, 0.6)',
           //        shadowOffsetX: 2,
           //        shadowOffsetY: 2
           //    }
           //}],
           dataZoom: [
               {
                   show: true,
                   realtime: true,
                   start: 0,
                   end: 100
               },
               {
                   type: 'inside',
                   realtime: true,
                   start: 0,
                   end: 100
               }
           ],

            series: [
            {
                name:titles[0],// '套管压力（MPa）',
                type: 'line',
                yAxisIndex:0,
                data: tgyl,
                    lineStyle: {
                        normal: {
                        color: 'red',
                         3,
                    }
            }
               },
                   {
                       name: titles[1],//'套管排量(m3/min)',
                       type: 'line',
                       yAxisIndex:1,
                       data: tgpl,
                           lineStyle: {
                               normal: {
                               color: 'blue',
                                3,
               }
           }
               },
                   {
                       name: titles[2],//'套管总液量(m3)',
                       type: 'line',
                       yAxisIndex:2,
                       data: tgzyl,
                            lineStyle: {
                                 normal: {
                                 color: '#B15BFF',
                                  3,
               }
           }
               },
                   {
                       name: titles[3],//'套管总砂量(m^3)',
                       type: 'line',223                        yAxisIndex: 3,
                       data: tgzsl,
                           lineStyle: {
                               normal: {
                               color: '#6F00D2',
                                3,
               }
           }
               },
                   {
                       name: titles[4],//'套管砂浓度(kg/m^3)',
                       type: 'line',
                       yAxisIndex: 4,
                       data: tgsnd,
                           lineStyle: {
                               normal: {
                               color: 'black',
                                3,
               }
           }
               },
                   {
                       name: titles[5],//'套管砂比(%)',
                       type: 'line',
                       yAxisIndex: 5,
                       data: tgsb,
                           lineStyle: {
                               normal: {
                               color: '#005AB5',
                                3,
               }
       }
            }
           ]
       };

       var myChart = echarts.init(dom, 'shine');
       myChart.setOption(option, true);

以上属性的设置是比较完整的，可设置x坐标，y坐标的定位及显示个数，数据的调整图片的保存以及区域的缩放，显示坐标轴的缩放等等

js代码里基本都设置了