Echart: цвет области управления - PullRequest
Новая
       13

Echart: цвет области управления

0 голосов
/ 25 октября 2018

Есть ли возможность изменить цвет области для каждой точки данных с помощью диаграмм, как это возможно в Google Charts:

enter image description here

Мне нужно что-токак роли столбцов стиль Аргумент: 

      data2.addRows([['2011-04-04', 7175, 'area { color: green }']...

1 Ответ

0 голосов
/ 07 ноября 2018

Это возможно с Визуальной картой и Частями.Вы можете использовать параметр min max Parameter для окраски нескольких диапазонов элементов определенным цветом: 

<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'
        },

   dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'filter'
            },
            {
                type: 'slider',
                yAxisIndex: 0,
                filterMode: 'empty'
            },
            {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'filter'
            },
            {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'empty'
            }
        ],        
        visualMap: {
        show: false,
        dimension: 0,
        pieces: [

        {min: 0, max: 2, color: 'red'},        
        {min: 2, max: 4, color: 'green'},        
        {min: 4, max: 6, color: 'yellow'}

        ]
    },
        series: [{

            data: [20,
                {
                    value: 22,
                    itemStyle: {
                        normal: {
                            color: 'green',
                            lineStyle: {
                                color: 'green'
                            },
                            areaStyle: {
                                color: 'green'
                            },

                        }

                    }
                },
                {
                    value: 26,
                    itemStyle: {
                        normal: {
                            color: 'green'


                        }

                    }
                },
                25, 27, 30, 25],


            type: 'line',
            areaStyle: {}    


        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


</body>
</html>
...