Echarts折线图分段用不同颜色显示

你的名字 2022-12-24 01:00 454阅读 0赞

json格式是数组的时候

  1. [
  2.     ["2000-06-05", 116],
  3.     ["2000-06-06", 129],
  4.     ["2000-06-07", 135],
  5.     ["2000-06-08", 86],
  6.     ["2000-06-09", 73],
  7.     ["2000-06-10", 85],
  8.     ["2003-11-29", 159],
  9.     ["2003-11-30", 147],
  10.     ["2003-12-01", 153],
  11.     ["2003-12-02", 135],
  12.     ["2003-12-03", 99],
  13.     ["2003-12-04", 92],
  14.     ["2003-12-05", 109],
  15.     ["2003-12-06", 99], 
  16.     ["2003-12-07", 300],
  17.     ["2003-12-08", 330],
  18.     ["2003-12-09", 33],
  19.     ["2003-12-10", 32],
  20.     ["2003-12-11", 31],
  21.     ["2015-02-24", 207]
  22. ]

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  7.         <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
  8.     </head>
  9.     <body>
  10.         <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  11.         <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
  12.         <script>
  13.             $.get('test.json', function (data) {
  14.                 var myChart = echarts.init(document.getElementById("main"));
  15.                 myChart.setOption(option = {
  16.                     title: {
  17.                         text: 'Beijing AQI'
  18.                     },
  19.                     tooltip: {
  20.                         trigger: 'axis'
  21.                     },
  22.                     xAxis: {
  23.                         data: data.map(function (item) {
  24.                             return item[0];
  25.                         })
  26.                     },
  27.                     yAxis: {
  28.                         splitLine: {
  29.                             show: false
  30.                         }
  31.                     },
  32.                     toolbox: {
  33.                         left: 'center',
  34.                         feature: {
  35.                             dataZoom: {
  36.                                 yAxisIndex: 'none'
  37.                             },
  38.                             restore: {},
  39.                             saveAsImage: {}
  40.                         }
  41.                     },
  42.                     dataZoom: [{
  43.                         startValue: '2014-06-01'
  44.                     }, {
  45.                         type: 'inside'
  46.                     }],
  47.                     visualMap: {
  48.                         top: 10,
  49.                         right: 10,
  50.                         pieces: [{
  51.                             gt: 0,
  52.                             lte: 50,
  53.                             color: '#096'
  54.                         }, {
  55.                             gt: 50,
  56.                             lte: 100,
  57.                             color: '#ffde33'
  58.                         }, {
  59.                             gt: 100,
  60.                             lte: 150,
  61.                             color: '#ff9933'
  62.                         }, {
  63.                             gt: 150,
  64.                             lte: 200,
  65.                             color: '#cc0033'
  66.                         }, {
  67.                             gt: 200,
  68.                             lte: 300,
  69.                             color: '#660099'
  70.                         }, {
  71.                             gt: 300,
  72.                             color: '#7e0023'
  73.                         }],
  74.                         outOfRange: {
  75.                             color: '#999'
  76.                         }
  77.                     },
  78.                     series: {
  79.                         name: 'Beijing AQI',
  80.                         type: 'line',
  81.                         data: data.map(function (item) {
  82.                             return item[1];
  83.                         }),
  84.                         markLine: {
  85.                             silent: true,
  86.                             data: [{
  87.                                 yAxis: 50
  88.                             }, {
  89.                                 yAxis: 100
  90.                             }, {
  91.                                 yAxis: 150
  92.                             }, {
  93.                                 yAxis: 200
  94.                             }, {
  95.                                 yAxis: 300
  96.                             }]
  97.                         }
  98.                     }
  99.                 });
  100.             });
  101.         </script>
  102.     </body>
  103. </html>

52a7e45953c7dc78ce9433af4fae13f1.png

发表评论

表情：
评论列表 （有 0 条评论，454人围观）

还没有评论，来说两句吧...

相关阅读