Question

是否可以使用echarts更改每个数据点的“区域颜色”，就像在Google图表中一样：

我需要类似列角色样式参数的内容：

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

Answer 1

这是带有可视化图和零件的可能。您可以使用min max参数以某种颜色为元素的多个范围着色：

<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>

图表：控制区域颜色

1 个答案: