Echarts中渐变折线图(对某个值以上的数据进行颜色更改)

// 将以下代码复制到 Echarts官网示例即可查看。
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
    
    
  return item[0];
});
const valueList = data.map(function (item) {
    
    
  return item[1];
});
option = {
    
    
  visualMap: [
    {
    
    
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 200,
      inRange: {
    
    
          color: ['#3196FA', '#EF4864']
      }
    }
  ],
  tooltip: {
    
    
    trigger: 'axis'
  },
  xAxis: [
    {
    
    
      data: dateList
    }
  ],
  yAxis: [
    {
    
    }
  ],
  series: [
    {
    
    
      type: 'line',
      showSymbol: false,
      data: valueList
    }
  ]
};

预览图:

在这里插入图片描述

完整的html代码:

<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=area-pieces&code=MYewdgzgLgBAJgQygmBeGBtDAiATABkIFp8A2EgVmwBoYBGO0gXVpwOLJNJvtwE4WmPIXxcSAdh50AzBUFsRY_AA4ey5q2Edy-Pj3HT5W0Zzr41czexPkG-w1cWncPUsqPWxMnn1wentgAsUtL4_tpEdFS0uIGWQp6m3LQyAo4RdJIpUeE2karZdLleerShaQkBRAQ8BBqVEbh0IeLFnLguKbju6Xm40hZt5LE-gUPV0TDiRb1iuMn0ZOO4WTDKY7PtBTB8Dg19pWvxChGh9m3iJM20ynsnJpf4nbzHxhIkAyn4rZuPwTd-X6UHiBDb7d5kfSA8HfCRSJZAlTwn4wx6HUj1e7vMw-GaoyLXHbQrGwujPBh3N6kz6LFEky50f70aR4-mRSYMVlUhkLUhgtmZVwVAXbZQ9fF0Q7iOnc6rmG6UxKXJpSBgXarPCgypXVGkUV46ka0UhhJgAbgAsAAoUCQWCIKAAUwAMgBLaBoeBIBAAOgAtggAA4ACgAZgBXMDAKCu8AwYOup1-gCUMAA3taYDAAE6OqDh7NgGCJx1-jBhS1WgC-ycrto9ADcEAAbcMu92wdAO30BkMRqMxuMJpOpjNWrO5_OF4tJjBFSs1ysgQODovoMdZhvu8MtgCyQYAXJhM1n0yfTzAIAALEAAdyPoZbEEd1HPp6gAE9A46jwByW0xmA4YgOGEC_q-44XpejrZq6joQAAkmAcCOgAHke-AQVBMB-q6YAYVhUEBuhMDsIRF54QASggYAAOY_mekHYVmoDNiA2ZHhgv4AMQsnwpAAGIAILgTAPEAKICYE6iBL-TBvlmVZvkpkEsCeUAgCAzYxoGR4bu-sG0fRHFiQgqHur-J5VoRqFCeZECcW--kXt2R4Ou20DKSeamQR-dnuo5THpipWY-Vmz6wfBgUXs575fgxv7NnhjrgQpl43reADKH5-gARlpD5Pi-aWuTATath5UBeap1pVmaQA
	⚠ 请注意,该图表不是 Apache ECharts 官方示例,而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
    
    
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {
    
    };
    
    var option;

    const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
    const dateList = data.map(function (item) {
    
    
      return item[0];
    });
    const valueList = data.map(function (item) {
    
    
      return item[1];
    });
    option = {
    
    
      visualMap: [
        {
    
    
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 200,
          inRange: {
    
    
              color: ['#3196FA', '#EF4864']
          }
        }
      ],
      tooltip: {
    
    
        trigger: 'axis'
      },
      xAxis: [
        {
    
    
          data: dateList
        }
      ],
      yAxis: [
        {
    
    }
      ],
      series: [
        {
    
    
          type: 'line',
          showSymbol: false,
          data: valueList
        }
      ]
    };

    if (option && typeof option === 'object') {
    
    
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/Y1914960928/article/details/129879351
今日推荐