Электронные диаграммы, как использовать visualMap

Как использовать visualMap для раскрашивания линий в зависимости от их значения по оси X. Я хочу окрасить в красный цвет все значения больше 23 и зеленый цвет для всех значений больше 23.

Мой сценарий выглядит так:

<html>
<head>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="main_chart" style="width: 1200px;height:600px;"></div>

<script type="text/javascript">

    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main_chart'));

    var app = {};
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']

        },
        yAxis: {
            type: 'value'
        },
        visualmap: {
            show: false,
            dimension: 0,
            min: 0,
            max: 10,
            range: [0, 23],
            inRange: {
                color: 'red'
            },
            outOfRange: {
                color: 'green'
            }
        },
        series: [{

            data: [20, 22, 25, 27, 30, 25],


            type: 'line',
            areaStyle: {}
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


</body>
</html

К сожалению, это не работает.

В общем, где-то есть хорошее описание того, как это работает с visualMap, в официальном документальном фильме echarts я этого не понимаю.


javascript echarts
person selbolder    schedule 26.10.2018    source источник
comment
пожалуйста, включите cdn URL-адреса используемых библиотек.   -  person Sumesh TG    schedule 26.10.2018
comment
вы можете использовать для этого действия отправки   -  person Akash Salunkhe    schedule 26.10.2018
comment
Акаш, не могли бы вы дать мне больше информации о действиях по отправке?   -  person selbolder    schedule 26.10.2018

Ответы (1)


arrow_upward
3
arrow_downward

Я предполагаю, что вы хотите покрасить красный цвет для всех значений меньше 23 и зеленый для всех значений больше 23.

вы можете использовать visualMap вот так

    "visualMap": [{
        "pieces": [{
            "gte": 23,
            "label": ">= 23",
            "color": "green"
        },  {
            "lt": 23,
            "gt": 0,
            "label": "< 23",
            "color": "red"
        }],
    }],


let echartsObj = echarts.init(document.querySelector('#canvas'));
   
let seriesData = [1, 1, 2, 3, 4, 6, 8];

option = {
        xAxis: {
            type: 'category',
            data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']

        },
        yAxis: {
            type: 'value'
        },

        series: [{

            data: [20, 22, 25, 27, 30, 25],


            type: 'line',
            areaStyle: {}
        }],
 
	   "visualMap": [{
          "pieces": [{
              "gte": 23,
              "label": ">= 23",
              "color": "green"
          },  {
              "lt": 23,
              "gt": 0,
              "label": "< 23",
              "color": "red"
          }],
      }],
    };

    echartsObj.setOption(option)
<html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id="canvas" style="width: 100%; height: 400px">
        </div>
      </body>
    </html>

person Ian Zhong    schedule 26.10.2018