Как я могу инвертировать бар на определенное значение Echarts - PullRequest
Новая
       27

Как я могу инвертировать бар на определенное значение Echarts

1 голос
/ 12 марта 2019

Я хочу инвертировать бар по определенному значению xAxis. Я хочу, чтобы мой бар выглядел так: Диаграмма цели

Мой текущий бар: Текущий график

Я просто хочу установить линию, где полоса станет положительной или отрицательной, мне безразличны цвета. Если возможно, приведите пример графика из другой библиотеки графиков или дайте несколько советов о том, как создать Диаграмму цели

Вот живая демонстрация: 

   var dom = document.getElementById("chart");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = 'Bar Chart';
    
    var xAxisData = [];
    var data1 = [];
    var data2 = [];
    var data3 = [];
    var data4 = [];
    
    for (var i = 0; i < 30; i++) {
        if (i % 2 == 0){
            data1.push((Math.random() * 105).toFixed(2));    
        }
    }
    
    var itemStyle = {
        normal: {
        },
        emphasis: {
            barBorderWidth: 1,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)'
        }
    };
    
    option = {
        backgroundColor: '#eee',
       
        legend: {
            data: ['bar'],
            align: 'left',
            left: 10
        },
        brush: {
            toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
            xAxisIndex: 0
        },
        toolbox: {
            feature: {
                magicType: {
                    type: ['stack', 'tiled']
                },
                dataView: {}
            }
        },
        tooltip: {},
        xAxis: {
            offset: 20,
            data: xAxisData,
            name: 'X Axis',
            silent: false,
            axisLine: {
                onZero: true,
            },
        },
        yAxis: {
            
            scale: false,
        },
        grid: {
            left: 100,
            
        },
        visualMap: {
            type: 'continuous',
            dimension: 1,
            text: ['High', 'Low'],
            inverse: true,
            itemHeight: 200,
            calculable: true,
            min: -2,
            max: 6,
            top: 60,
            left: 10,
            inRange: {
                colorLightness: [0.4, 0.8]
            },
            outOfRange: {
                color: '#bbb'
            },
            controller: {
                inRange: {
                    color: '#2f4554'
                }
            }
        },
        series: [
            {
                name: 'bar',
                type: 'bar',
                start: 50,
                barMinHeight: 20,
                lage: true,
                stack: 'one',
                itemStyle: itemStyle,
                data: data1
            },
    
        ]
    };
    
    myChart.on('brushSelected', renderBrushed);
    
    function renderBrushed(params) {
        var brushed = [];
        var brushComponent = params.batch[0];
    
        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
            var rawIndices = brushComponent.selected[sIdx].dataIndex;
            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
        }
    
        myChart.setOption({
            title: {
                backgroundColor: '#333',
                text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                bottom: 0,
                right: 0,
                width: 100,
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            }
        });
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
       
 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    
    </head>
    <body>
        <div class="containser">
            <div id="chart" style="width:1000px; height: 700px"></div>
        </div>
    
        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </body>
    </html>
...