javascript - 如何在Echart中添加数据到 'categoryB'和 'categoryC'？-6ren

javascript - 如何在Echart中添加数据到 'categoryB'和 'categoryC'？

转载作者：行者123 更新时间：2023-12-02 22:24:55

我的 Echart.js 有一些问题。其实这不是一个大问题，我只是想将数据添加到“categoryB”和“categoryC”。但我不知道该怎么办。我将为您提供此图表的图像、代码和 Github。

The chart image

github 到此图表:https://github.com/suplex2825/chart-

代码:

<!DOCTYPE html>
<html 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="dist/echarts.min.js"></script>
       <script type="text/javascript" src="dist2/echarts-gl.min.js"></script>
       <script type="text/javascript" src="dist3/ecStat.min.js"></script>
       <script type="text/javascript" src="dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="map/js/china.js"></script>
       <script type="text/javascript" src="map/js/world.js"></script>
<!--       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>-->
       <script type="text/javascript" src="dist/extension/bmap.min.js"></script>
       <script type="text/javascript" src="test/lib/simplex.js"></script>
       <script type="text/javascript"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;

var data = [
    {            name: 'e',
            value: [
                0,
                '2016/12/18 00:00:00',
                '2016/12/18 00:30:05',
                5
            ],
            itemStyle: {
                normal: {
                    color: 'blue'
                }
            }},    {            name: 'e',
            value: [
                0,
                '2016/12/18 01:00:00',
                '2016/12/18 01:30:05',
                '123wewe'
            ],
            itemStyle: {
                normal: {
                    color: 'blue'
                }
            }}
    ];
var dataCount = 10;
var startTime = +new Date();
var categories = ['categoryA', 'categoryB', 'categoryC'];
var types = [
    {name: 'JS Heap', color: '#7b9ce1'},
    {name: 'Documents', color: '#bd6d6c'},
    {name: 'Nodes', color: '#75d874'},
    {name: 'Listeners', color: '#e0bc78'},
    {name: 'GPU Memory', color: '#dc77dc'},
    {name: 'GPU', color: '#72b362'}
];
var anchor = [
    {name:'2016/12/18 00:00:00', value:['2016/12/18 00:00:00', 0]},
    {name:'2016/12/19 00:00:00', value:['2016/12/19 00:00:00', 0]}
    ];
// Generate mock data
/*echarts.util.each(categories, function (category, index) {
    var baseTime = startTime;
    for (var i = 0; i < dataCount; i++) {
        var typeItem = types[Math.round(Math.random() * (types.length - 1))];
        var duration = Math.round(Math.random() * 10000);
        data.push({
            name: typeItem.name,
            value: [
                index,
                baseTime,
                baseTime += duration,
                duration
            ],
            itemStyle: {
                normal: {
                    color: typeItem.color
                }
            }
        });
        baseTime += Math.round(Math.random() * 2000);
    }
});*/
console.log(data);
function renderItem(params, api) {
    console.log(api);
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = api.size([0, 1])[1] * 0.6;

    return {
        type: 'rect',
        shape: echarts.graphic.clipRectByRect({
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        }, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        }),
        style: api.style()
    };
}


option = {
    tooltip: {
        formatter: function (params) {
            return params.marker + params.name + ': ' + params.value[3] + ' ms';
        }
    },
    title: {
        text: 'Profile',
        left: 'center'
    },
    legend: {
        data: ['bar', 'error']
    },
    dataZoom: [{
        type: 'slider',
        filterMode: 'weakFilter',
        showDataShadow: false,
        top: 400,
        height: 10,
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        handleSize: 20,
        handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
        },
        labelFormatter: ''
    }, {
        type: 'inside',
        filterMode: 'weakFilter'
    }],
    grid: {
        height:300
    },
    xAxis: {
        type:'time',
        //min: startTime,
        scale: true,
        //axisLabel: {
        //    formatter: function (val) {
       //         return Math.max(0, val - startTime) + ' ms';
       //     }
       // }
    },
    yAxis: {
        data: categories
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {
            normal: {
                opacity: 0.8
            }
        },
        encode: {
            x: [1, 2],
            y: 0
        },
        data: data
    },{
        name:'.anchor',
        type:'line', 
        showSymbol:false, 
        data:anchor,
        itemStyle:{normal:{opacity:0}},
        lineStyle:{normal:{opacity:0}}
    }]
};
;
myChart.on('click',function(p){
    console.log('click');
    console.log(p)
});
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

最佳答案

您的 renderItem 方法需要返回多个子项。现在，你只是要归还一个 child 。实际上，您可以通过将其包含在您的申报表中来选择要显示的 child 。

总而言之，您需要执行以下操作:


    return {
        type: 'group',
        children: [
            {
            type: 'rect',
            ignore: api.value(0) !== 'Category B' && api.value(0) !== 'Category C',
            shape: echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
            }, 
            {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            }),
            style: api.style(),
        },
        {
        type : 'rect',
        ignore : api.value(0) !== 'Category A' && api.value(0) !== 'Category C',
        shape : echarts.graphic.clipRectByRect({
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        }, 
        {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        }),
        style: api.style(),
        }]
    };