变化率折线

描述:当前是关于Echarts图表中的 折线图 示例。
 
            option = {
 backgroundColor:"#ffffff",
        tooltip: {
          trigger: 'xAxis', // 若需要使用默认的『显示』『隐藏』触发规则,则可以去掉trigger的配置
          axisPointer: { type: 'cross', show: true },
          formatter: '{a}{b}{c}' // 默认触发规则中散点展示的内容,{a}标题;{b}X坐标;{c}Y坐标
        },
        legend: {
          data: [{name:'change of report number',textStyle: {color:"#2A77AC"}},],
          orient: 'vertical',
          top:"85px",
          right: '14%',
          borderWidth:2,
          textStyle: {
            fontSize: '25px',
            fontWeight: 700
        },
      },
        grid: {
          show:true,
          left:200,
          bottom:100,
          borderColor: "black",
    borderWidth:3
        },
        xAxis: [
          {
                        name: 'Date',
            nameGap: 30,  // y轴name与横纵坐标轴线的间距
            nameLocation: "middle", // y轴name处于y轴的什么位置
            "nameTextStyle":{
              "fontSize":25,
              "fontWeight":700
            } ,
            max:370,
            splitLine:{
                show:false //去掉网格线
            },
            type: 'category',
            axisLabel: {
              interval:30,
              show: true,
              textStyle: {
                color: '#000000',
                "fontSize": 18
              },
            },
            axisLine: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            splitLine:{
                show:false //去掉网格线
            },
            type: 'value',
            name: 'number of change',
            nameGap: 80,  // y轴name与横纵坐标轴线的间距
            nameLocation: "middle", // y轴name处于y轴的什么位置
            "nameTextStyle":{
              "fontSize":25,
              "fontWeight":700
            } ,
            max: 90000,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#',
                "fontSize": 18
              },
            },
            axisLine: {
              show: true
            }
          },
        ],
        series: [
  
          {
            name: 'change of report number',
            "nameTextStyle":{"fontSize":25} ,
            type: 'line',
            data:[0,
80630.0,
20873.0,
-10026.0,
15657.0,
46746.0,
-16294.0,
-4860.0,
36758.0,
36396.0,
3729.0,
12588.0,
-1247.0,
59672.0,
-36658.0,
29763.0,
-32238.0,
28440.0,
-11891.0,
18366.0,
25944.0,
29496.0,
-34876.0,
16252.0,
-18533.0,
46627.0,
10349.0,
10245.0,
-3732.0,
1503.0,
-39981.0,
-8680.0,
-22790.0,
48008.0,
-30864.0,
-542.0,
-26004.0,
-8941.0,
7586.0,
-15950.0,
26315.0,
1885.0,
52282.0,
-76765.0,
17089.0,
-9021.0,
5425.0,
27625.0,
-28780.0,
-26902.0,
5233.0,
-7544.0,
2050.0,
681.0,
-10957.0,
17167.0,
-17286.0,
-36288.0,
26165.0,
-11300.0,
0.0,
-11122.0,
-5674.0,
7085.0,
17465.0,
-34300.0,
-12613.0,
5970.0,
17449.0,
15001.0,
-48785.0,
10759.0,
-23519.0,
-1324.0,
18649.0,
-13475.0,
-3376.0,
12281.0,
-18869.0,
-690.0,
15961.0,
8228.0,
-24626.0,
9069.0,
-22920.0,
9429.0,
10431.0,
-30547.0,
5119.0,
-8295.0,
-3500.0,
-95.0,
23397.0,
-6948.0,
-7969.0,
-16413.0,
5079.0,
8348.0,
-9807.0,
16543.0,
-22004.0,
-1306.0,
5702.0,
-3484.0,
-6892.0,
-4052.0,
21277.0,
-23670.0,
1890.0,
-5904.0,
11605.0,
-4186.0,
-9993.0,
17678.0,
-28661.0,
-333.0,
17985.0,
-9826.0,
21933.0,
-21771.0,
-9687.0,
-1834.0,
-1940.0,
16414.0,
-14520.0,
5034.0,
-3773.0,
1912.0,
-4360.0,
-6110.0,
1234.0,
2373.0,
3211.0,
-3013.0,
-1036.0,
-3070.0,
1095.0,
-1478.0,
-3051.0,
-657.0,
465.0,
658.0,
-3777.0,
-3230.0,
4130.0,
1799.0,
473.0,
-1963.0,
4153.0,
-7168.0,
-1525.0,
1740.0,
513.0,
2035.0,
-1006.0,
-4644.0,
-3418.0,
4726.0,
-2882.0,
6166.0,
-3979.0,
-2559.0,
1235.0,
-7460.0,
8154.0,
-4875.0,
2858.0,
-5697.0,
5466.0,
-2494.0,
-4528.0,
4361.0,
-2464.0,
-674.0,
-1667.0,
-1433.0,
3036.0,
-5483.0,
-1279.0,
2159.0,
1933.0,
2766.0,
-3937.0,
-601.0,
4288.0,
-5309.0,
-1240.0,
6365.0,
-664.0,
-5697.0,
-1315.0,
-465.0,
842.0,
2963.0,
-2907.0,
2570.0,
-3151.0,
4013.0,
-6330.0,
3044.0,
-585.0,
-57.0,
-787.0,
2266.0,
-2859.0,
-438.0,
1897.0,
-2588.0,
-1753.0,
3472.0,
-1152.0,
121.0,
1491.0,
-2618.0,
-707.0,
707.0,
1431.0,
-353.0,
-3103.0,
1078.0,
-3624.0,
3724.0,
-271.0,
710.0,
-877.0,
-973.0,
4280.0,
-2628.0,
271.0,
-2339.0,
151.0,
3037.0,
-2021.0,
-3475.0,
-1027.0,
4067.0,
-621.0,
1683.0,
-3440.0,
3821.0,
-4533.0,
827.0,
715.0,
1.0,
-1742.0,
970.0,
210.0,
-2935.0,
-1350.0,
1260.0,
350.0,
2645.0,
1202.0,
3965.0,
-3891.0,
-316.0,
1948.0,
-3773.0,
699.0,
2479.0,
-2946.0,
1268.0,
-3783.0,
2712.0,
-721.0,
370.0,
-878.0,
746.0,
-3021.0,
1886.0,
2200.0,
-274.0,
-1079.0,
1587.0,
-3496.0,
-2121.0,
1503.0,
-1530.0,
1697.0,
576.0,
-1954.0,
1709.0,
1497.0,
56.0,
810.0,
-2657.0,
-290.0,
419.0,
-104.0,
447.0,
195.0,
-332.0,
6.0,
1110.0,
-2454.0,
296.0,
-2749.0,
-484.0,
1826.0,
1004.0,
168.0,
1884.0,
-2224.0,
2413.0,
1325.0,
-4972.0,
1117.0,
1771.0,
-1517.0,
-1474.0,
-1333.0,
425.0,
1451.0,
939.0,
-1899.0,
1889.0,
1743.0,
-4459.0,
242.0,
-703.0,
3149.0,
-774.0,
1042.0,
-3508.0,
2184.0,
-1175.0,
845.0,
-2312.0,
-21170.0,
20059.0,
2018.0,
-773.0,
1704.0,
-2424.0,
356.0,
1390.0,
-3700.0,
2441.0,
-2483.0,
790.0,
926.0,
1228.0,
-3277.0,
1352.0,
677.0,
-517.0,
-170.0,
3844.0,
-1873.0,
-1957.0,
-1690.0,
1447.0,
-1656.0,
-4727.0,
4457.0,
868.0,
-719.0,
-159.0,
1203.0,
],            markLine: {
                symbol: "none",//去掉警戒线最后面的箭头
                label: {position: "end"},//将警示值放在哪个位置,三个值“start”,"middle","end"  开始  中点 结束
                data: [
                  {
                    name: 'x',
                    yAxis:-5400
,
                    silent: true,             //鼠标悬停事件  true没有,false有
                    lineStyle: {               //警戒线的样式  ,虚实  颜色
                      type: "solid",
                      color: "#D75615",
                    },
                    label: {
                    show: true,
                      textStyle:{
                          fontSize:"25px",
                          color: "#D75615",
                  
                      }      
                  },
                  },  {
                    name: 'x',
                    yAxis:5400
,
                    silent: true,             //鼠标悬停事件  true没有,false有
                    lineStyle: {               //警戒线的样式  ,虚实  颜色
                      type: "solid",
                      color: "#D75615",
                    },
                    label: {
                    show: true,
                      textStyle:{
                          fontSize:"25px",
                          color: "#D75615",
                          formatter:" {value}"
                      }      
                  },
                  },
                ]
              },
            color: '#2A77AC'
          }
        ]
};