武汉ECharts Gallery

20:11:45图表已生成
代码
var timedata = ['1-11',
 '1-12',
 '1-13',
 '1-14',
 '1-15',
 '1-16',
 '1-17',
 '1-18',
 '1-19',
 '1-20',
 '1-21',
 '1-22',
 '1-23',
 '1-24',
 '1-25',
 '1-26',
 '1-27',
 '1-28',
 '1-29',
 '1-30',
 '1-31',
 '2-1',
 '2-2',
 '2-3',
 '2-4',
 '2-5',
 '2-6',
 '2-7',
 '2-8',
 '2-9',
 '2-10',
 '2-11',
 '2-12',
 '2-13',
 '2-14',
 '2-15',
 '2-16',
 '2-17',
 '2-18',
 '2-19',
 '2-20',
 '2-21',
 '2-22',
 '2-23',
 '2-24',
 '2-25',
 '2-26',
 '2-27',
 '2-28',
 '2-29',
 '3-1',
 '3-2',
 '3-3',
 '3-4',
 '3-5',
 '3-6',
 '3-7',
 '3-8',
 '3-9',
 '3-10',
 '3-11',
 '3-12',
 '3-13',
 '3-14',
 '3-15',
 '3-16',
 '3-17',
 '3-18',
 '3-19',
 '3-20',
 '3-21',
 '3-22',
 '3-23',
 '3-24',
 '3-25',
 '3-26',
 '3-27',
 '3-28',
 '3-29',
 '3-30',
 '3-31',
 ];
var mean_value = [0,
  10,
  10,
  11,
  14,
  18,
  24,
  32,
  44,
  60,
  81,
  111,
  104,
  130,
  277,
  388,
  487,
  587,
  695,
  818,
  963,
  1333,
  1564,
  2071,
  2362,
  2529,
  2620,
  2661,
  2668,
  2652,
  2619,
  2574,
  3852,
  3912,
  2035,
  1724,
  1472,
  1263,
  1084,
  932,
  801,
  688,
  592,
  509,
  438,
  377,
  325,
  280,
  242,
  209,
  180,
  156,
  135,
  117,
  102,
  88,
  77,
  67,
  58,
  51,
  45,
  39,
  34,
  30,
  27,
  24,
  21,
  19,
  17,
  15,
  13,
  12,
  11,
  10,
  9,
  8,
  7,
  7,
  6,
  6,
  5,
  ];
var up_CI = [0,
  20,
  12,
  13,
  16,
  21,
  27,
  36,
  49,
  67,
  91,
  126,
  104,
  237,
  355,
  476,
  580,
  681,
  787,
  910,
  1070,
  1333,
  2085,
  2367,
  2681,
  2842,
  2900,
  2908,
  2900,
  2894,
  2891,
  2883,
  3852,
  4227,
  2291,
  1870,
  1598,
  1372,
  1178,
  1013,
  872,
  752,
  651,
  564,
  491,
  428,
  374,
  328,
  289,
  255,
  226,
  200,
  178,
  159,
  142,
  128,
  115,
  104,
  95,
  86,
  79,
  72,
  66,
  61,
  56,
  52,
  48,
  45,
  42,
  39,
  36,
  34,
  32,
  30,
  28,
  27,
  25,
  24,
  22,
  21,
  20,
  ];
var down_CI = [0,
  0,
  8,
  10,
  12,
  16,
  21,
  29,
  39,
  53,
  71,
  96,
  104,
  23,
  198,
  301,
  394,
  492,
  603,
  727,
  856,
  1333,
  1044,
  1775,
  2043,
  2216,
  2340,
  2415,
  2437,
  2410,
  2348,
  2265,
  3852,
  3597,
  1778,
  1579,
  1345,
  1154,
  991,
  851,
  729,
  624,
  533,
  454,
  386,
  327,
  276,
  232,
  195,
  163,
  135,
  112,
  92,
  75,
  61,
  48,
  38,
  29,
  22,
  16,
  11,
  6,
  3,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  ];
var actual_value = [0,
  0,
  0,
  0,
  0,
  6,
  25,
  88,
  115,
  89,
  157,
  92,
  104,
  115,
  69,
  119,
  1330,
  470,
  531,
  564,
  859,
  1333,
  1540,
  1852,
  2933,
  2633,
  2238,
  2960,
  2056,
  2864,
  2314,
  1646,
  3852,
  3910,
  1923,
  1548,
  1690,
  1600,
  1660,
  615,
  319,
  314,
  541,
  348,
  464,
  370,
  383,
  313,
  420,
  565,
  193,
  111,
  114,
  131,
  126,
  74,
  41,
  36,
  17,
  13,
  8,
  5,
  4,
  4,
  4,
  1,
  1,
  0,
  0,
  0,
  0,
  0,
  1,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  0,
  ];

option = {
 tooltip: {
   trigger: 'axis'
 },
 legend: {
   color: ["#F58080", "#47D8BE", "#F9A589", "#F9A589"],
   data: ['均值', '置信上限', '置信下限', '实际数据'],
   textStyle: {
     color: ["#F58080", "#47D8BE", "#F9A589", "#F9A589"],
   },
   left: 'center',
   top: '1%'
   // bottom: 'bottom'
 },
 grid: {
   // show:'',
   top: 'middle',
   left: '10%',
   right: '4%',
   bottom: '5%',
   height: '85%',
   containLabel: false,
   backgroundColor: "#f74914",
 },
 xAxis: {
   type: 'category',
   data: timedata,
   axisLine: {
     lineStyle: {
       color: "#999"
     }
   }
 },
 yAxis: {
   type: 'value',

   splitLine: {
     show: false,
     lineStyle: {
       type: 'dashed',
       color: '#DDD'
     }
   },
   axisLine: {
     // show: false,
     lineStyle: {
       color: "#999"
     },
   },
   nameTextStyle: {
     color: "#999"
   },
   splitArea: {
     show: false
   }
 },
 series: [{
   name: '均值',
   symbol: 'circle',
   type: 'line',
   data: mean_value,
   color: "#14f7a0",
   lineStyle: {
     normal: {
       width: 3,
       color: '#14f7a0',
       shadowColor: 'rgba(245,128,128, 0.5)',
       shadowBlur: 10,
       shadowOffsetY: 7
     }
   },
//   itemStyle: {
//      normal: {
//       color: '#F58080',
//       borderWidth: 3,
//       /*shadowColor: 'rgba(72,216,191, 0.3)',
//         shadowBlur: 100,*/
//       borderColor: "#F58080"
//      }
//   },
   smooth: true
 },
 {
   name: '置信上限',
   type: 'line',
   symbol: 'circle',
   data: up_CI,
   lineStyle: {
     normal: {
       width: 1,
       color: {
         type: 'linear',
         colorStops: [{
           offset: 0,
           color: '#f66fc2' // 0% 处的颜色
         },
         {
           offset: 0.4,
           color: '#f66fc2' // 100% 处的颜色
         }, {
           offset: 1,
           color: '#f66fc2' // 100% 处的颜色
         }
         ],
         globalCoord: false // 缺省为 false
       },
       // shadowColor: 'rgba(249,165,137, 0.5)',
       // shadowBlur: 10,
       // shadowOffsetY: 7


       // colorStops: [{
       //         offset: 0,
       //         color: '#AAF487' // 0% 处的颜色
       //     },
       //     {
       //         offset: 0.4,
       //         color: '#47D8BE' // 100% 处的颜色
       //     }, {
       //         offset: 1,
       //         color: '#47D8BE' // 100% 处的颜色
       //     }
       // ],
       //     globalCoord: false // 缺省为 false
       // },
       // shadowColor: 'rgba(71,216,190, 0.5)',
       // shadowBlur: 10,
       // shadowOffsetY: 7
     }
   },
   itemStyle: {
     normal: {
       color: '#f714cd',
       borderWidth: 1,
       /*shadowColor: 'rgba(72,216,191, 0.3)',
        shadowBlur: 100,*/
       // borderColor: "#f66fc2"
     }
   },
   smooth: true
 },
 {
   name: '置信下限',
   symbol: 'circle',
   type: 'line',
   data: down_CI,
   
   color: '#F9A589',
   lineStyle: {
     normal: {
       width: 1,
       color: '#F9A589',
       // shadowColor: 'rgba(249,165,137, 0.5)',
       // shadowBlur: 10,
       // shadowOffsetY: 7


       // colorStops: [{
       //         offset: 0,
       //         color: '#AAF487' // 0% 处的颜色
       //     },
       //     {
       //         offset: 0.4,
       //         color: '#47D8BE' // 100% 处的颜色
       //     }, {
       //         offset: 1,
       //         color: '#47D8BE' // 100% 处的颜色
       //     }
       // ],
       //     globalCoord: false // 缺省为 false
       // },
       // shadowColor: 'rgba(71,216,190, 0.5)',
       // shadowBlur: 10,
       // shadowOffsetY: 7
     }
   },
//   itemStyle: {
//      normal: {
//       color: '#f7e814',
//       borderWidth: 1,
//       /*shadowColor: 'rgba(72,216,191, 0.3)',
//         shadowBlur: 100,*/
//       // borderColor: "#f66fc2"
//      }
//   },
   smooth: true
 },

 {
   name: '实际数据',
   type: 'scatter',
   data: actual_value,

   symbol: 'triangle',
   itemStyle: {
     normal: {
       color: '#148df7',
       borderWidth: 1,
       /*shadowColor: 'rgba(72,216,191, 0.3)',
        shadowBlur: 100,*/
       // borderColor: "#f66fc2"
     }
   },
   smooth: true
 },
 ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
