renderItem只对部分数据起作用ECharts Gallery

20:11:45图表已生成
代码
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

var data = [];
var startTime = 0;
var categories = [];
var types = [{
    color: '#7b9ce1'
}, {
    color: '#bd6d6c'
}, {
    color: '#75d874'
}, {
    color: '#e0bc78'
}, {
    color: '#dc77dc'
}, {
    color: '#72b362'
}, {
    color: '#FFD700'
}, {
    color: '#FF3E96'
}, {
    color: '#BF3EFF'
}, {
    color: '#836FFF'
}];
var index = 0;
var maxNum = "${signalPage.intMaxNum}";
if (maxNum == 1)
    maxNum = 2;
for (var i = 0; i < maxNum; i++)
    categories.push(''); <
c: forEach items = "${signalPage.signalDynamicVOList}"
var = "signalDynamicVO" >
data.push({
    name: "${signalDynamicVO.intId}",
    value: [index, "${signalDynamicVO.floatLowFrequency}",
        "${signalDynamicVO.floatHighFrequency}",
        "${signalDynamicVO.strUpDown}",
        "${signalDynamicVO.strProtocol}",
        "${signalDynamicVO.strModulation}",
        "${signalDynamicVO.strBandwidth}",
        "${signalDynamicVO.strSymbolRate}",
        "${signalDynamicVO.floatFrequencyOffset}",
        "${signalDynamicVO.strChannelCoding}",
        "${signalDynamicVO.strUnit}",
        "${signalDynamicVO.strRemark}",
        "${signalDynamicVO.strName}"
    ],
    itemStyle: {
        normal: {
            color: types[Math
                .round(Math.random() * (types.length - 1))].color
        }
    }
});
if (index == (maxNum - 1)) {
    index = 0;
} else {
    index = index + 1;
} <
/c:forEach>
//var count = 0;
function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = 10;
    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) {
            var str = "<ul style='margin: 0;padding:0 10px 0 10px'><li><span style='font-size:1.1em'>名称</span>：" +
                params.value[12] +
                "</li><li><span style='font-size:1.1em'>起始频率</span>：" +
                params.value[1] +
                "MHz</li><li><span style='font-size:1.1em'>截止频率</span>：" +
                params.value[2] + "MHz</li>";
            if (params.value[3] != null && params.value[3] != "") {
                str = str +
                    "<li><span style='font-size:1.1em'>上下行</span>：" +
                    params.value[3] + "</li>";
            }
            if (params.value[4] != null && params.value[4] != "") {
                str = str +
                    "<li><span style='font-size:1.1em'>参考技术体制</span>：" +
                    params.value[4] + "</li>";
            }
            if (params.value[5] != null && params.value[5] != "") {
                str = str +
                    "<li><span style='font-size:1.1em'>调制方式</span>：" +
                    params.value[5] + "</li>";
            }
            if (params.value[6] != null && params.value[6] != "") {
                str = str +
                    "<li><span style='font-size:1.1em'>信道带宽</span>：" +
                    params.value[6] + "</li>";
            }
            if (params.value[7] != null && params.value[7] != "") {
                str = str +
                    "<li><span style='font-size:1.1em'>符号速率</span>：" +
                    params.value[7] + "</li>";
            }
            if (params.value[8] != null && params.value[8] != "") {
                str = str +
                    "<li><span style='font-size:1.1em'>频偏</span>：" +
                    params.value[8] + "Hz</li>";
            }
            if (params.value[9] != null && params.value[9] != "") {
                str = str +
                    "<li><span style='font-size:1.1em'>信道编码</span>：" +
                    params.value[9] + "</li>";
            }
            if (params.value[10] != null && params.value[10] != "") {
                if (params.value[10].length > 35) {
                    str = str +
                        "<li><span style='font-size:1.1em'>用频单位/应用</span>：" +
                        params.value[10].substring(0, 35) +
                        "</li>";
                    str = str +
                        "<li>" +
                        params.value[10].substring(35,
                            params.value[10].length) + "</li>";
                } else {
                    str = str +
                        "<li><span style='font-size:1.1em'>用频单位/应用</span>：" +
                        params.value[10] + "</li>";
                }
            }
            if (params.value[11] != null && params.value[11] != "") {
                str = str +
                    "<li><span style='font-size:1.1em'>其他信息</span>：" +
                    params.value[11] + "</li>";
            }
            return str;
        }
    },
    title: {
        text: '北京地区无线电频率使用标示图',
        left: 'center'
    },
    legend: {
        data: ['bar', 'error']
    },
    dataZoom: [{
        type: 'slider',
        filterMode: 'weakFilter',
        showDataShadow: false,
        top: 420,
        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,
        x: 30
    },
    xAxis: {
        scale: true,
        axisLabel: {
            formatter: function(val) {
                return Math.max(0, val - startTime) + ' MHz';
            }
        }
    },
    yAxis: {
        data: categories
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {
            normal: {
                opacity: 0.8
            }
        },
        encode: {
            x: [1, 2],
            y: 0
        },
        data: data
    }]
};

myChart.on('click', function(params) {
    showDetail(params.name, params.value[12]);
});

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
