公交发展方向性公平echarts custom配置项内容和展示

      
function renderItem(params, api) {
    var values = [api.value(0), api.value(1)];
    var coord = api.coord(values);
    var size = api.size([1, 1], values);
    return {
        type: 'sector',
        shape: {
            cx: params.coordSys.cx,
            cy: params.coordSys.cy,
            r0: coord[2] - size[0] / 2,
            r: coord[2] + size[0] / 2,
            startAngle: -(coord[3] + size[1] / 2),
            endAngle: -(coord[3] - size[1] / 2)
        },
        style: api.style({
            fill: api.visual('color')
        })
    };
}

var hours = ['0°','30°', '60°', '90°', '120°', '150°', '180°','210°', '240°', '270°', '300°', '330°'];
var days = ['3km', '6km', '9km', '12km', '15km'];

var data = [[0, 0, 0.5078901227352426] ,
[0, 1, 0.8010021474588404] ,
[0, 2, 0.41331546023235033] ,
[0, 3, 0.5320388349514563] ,
[0, 4, 0.46387643248629795] ,
[0, 5, 0.44819277108433736] ,
[0, 6, 0.4690909090909091] ,
[0, 7, 0.30407523510971785] ,
[0, 8, 0.4039158810732415] ,
[0, 9, 0.47897897897897895] ,
[0, 10, 0.5709900230237912] ,
[0, 11, 0.6200287494010541] ,
[1, 0, 0.30192544039328145] ,
[1, 1, 0.38099547511312215] ,
[1, 2, 0.43304278922345485] ,
[1, 3, 0.47442281575373474] ,
[1, 4, 0.5073469387755102] ,
[1, 5, 0.39708404802744424] ,
[1, 6, 0.3407098121085595] ,
[1, 7, 0.34814814814814815] ,
[1, 8, 0.46888624653190647] ,
[1, 9, 0.2593290614398794] ,
[1, 10, 0.44119516846789575] ,
[1, 11, 0.5] ,
[2, 0, 0.2322860962566845] ,
[2, 1, 0.44609487302347867] ,
[2, 2, 0.364125932062966] ,
[2, 3, 0.2154793315743184] ,
[2, 4, 0.39378547953391096] ,
[2, 5, 0.2767253044654939] ,
[2, 6, 0.24983255190890824] ,
[2, 7, 0.42436829352717204] ,
[2, 8, 0.47375690607734805] ,
[2, 9, 0.28708133971291866] ,
[2, 10, 0.29241435562805873] ,
[2, 11, 0.3131067961165049] ,
[3, 0, 0.4533248081841432] ,
[3, 1, 0.47063471161443243] ,
[3, 2, 0.23407755581668624] ,
[3, 3, 0.19516158151290847] ,
[3, 4, 0.19372167198254156] ,
[3, 5, 0.21771553292106222] ,
[3, 6, 0.24478594950603733] ,
[3, 7, 0.27955047160345176] ,
[3, 8, 0.2374507874015748] ,
[3, 9, 0.3534153585065762] ,
[3, 10, 0.2576617480136209] ,
[3, 11, 0.37816498774843454] ,
[4, 0, 0.46930946291560105] ,
[4, 1, 0.35975341259357113] ,
[4, 2, 0.31457524795170333] ,
[4, 3, 0.3389894419306184] ,
[4, 4, 0.24025270758122744] ,
[4, 5, 0.2316399052382206] ,
[4, 6, 0.2563441712926249] ,
[4, 7, 0.1805414551607445] ,
[4, 8, 0.3112673305994923] ,
[4, 9, 0.22778891115564462] ,
[4, 10, 0.29327902240325865] ,
[4, 11, 0.3224278949634094] ,];
var maxValue = echarts.util.reduce(data, function (max, item) {
    return Math.max(max, item[2]);
}, -Infinity);

option = {
    legend: {
        data: ['北京 180°']
    },
    polar: {},
    tooltip: {
    },
    visualMap: {
        type: 'continuous',
        min: 0.2,
        max: maxValue,
        top: '65%',
        left:'10%',
        dimension: 2,
        calculable: true,
        // color: ['#c05050','#e5cf0d','#5ab1ef'],
    },
    angleAxis: {
        type: 'category',
        data: hours,
        boundaryGap: false,
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ddd',
                type: 'dashed'
            }
        },
        axisLine: {
            show: false
        }
    },
    radiusAxis: {
        type: 'category',
        data: days,
        z: 100
    },
    series: [{
        name: '北京 30°',
        type: 'custom',
        coordinateSystem: 'polar',
        itemStyle: {
            color: '#d14a61'
        },
        renderItem: renderItem,
        data: data
    }]
};