Echarts在线免费图表

 
            let pieData = [
    {value: 20,name: 'inner',itemStyle: {color: "rgba(0,112,233,1)",}},
    {value: 120,name: 'part',itemStyle: {color: "#00B0E3",}}
]
let pieTotal = pieData.reduce((total,item)=>{
    return total + item.value;
},0)
let pieInnerRate = pieData[0].value/pieTotal ;

let partData = [
    {real: 2,value:10,name: 'name-1',itemStyle: {color: "rgba(0,112,233,0.9)",}},
    {real: 3,value:10,name: 'name-2',itemStyle: {color: "rgba(0,112,233,0.8)",}},
    {real: 5,value:10,name: 'name-3',itemStyle: {color: "rgba(0,112,233,0.7)",}},
    {real: 6,value:10,name: 'name-4',itemStyle: {color: "rgba(0,112,233,0.6)",}},
    {real: 8,value:10,name: 'name-5',itemStyle: {color: "rgba(0,112,233,0.5)",}},
    {real: 9,value:10,name: 'name-6',itemStyle: {color: "rgba(0,112,233,0.3)",}},
]
let boxConfig = {
    width:myChart.getWidth(),
    height:myChart.getHeight(),
    circleWidth1:0.7,
    circleWidth2:0.9,
    moreLeft: 0.7,
    moreRight: 0.1,
    moreTop: 0.3,
    moreBottom: 0.3
}
let pieRL= (boxConfig.width/4 > boxConfig.height/2?boxConfig.height/2:boxConfig.width/4);
let pieRWidth = pieRL*boxConfig.circleWidth2;

let pointsPosition = [
    [
        (0.25 * boxConfig.width + pieRWidth*Math.cos(pieInnerRate/2*2*Math.PI)),
        (0.5 * boxConfig.height - pieRWidth*Math.sin(pieInnerRate/2*2*Math.PI))
    ],[
        (boxConfig.moreLeft * boxConfig.width),
        (boxConfig.moreTop * boxConfig.height)
    ],[
        (boxConfig.moreLeft * boxConfig.width), 
        ((1-boxConfig.moreBottom) * boxConfig.height)
    ],[
        (0.25 * boxConfig.width + pieRWidth*Math.cos(pieInnerRate/2*2*Math.PI)),
        (0.5 * boxConfig.height + pieRWidth*Math.sin(pieInnerRate/2*2*Math.PI))
    ],[
        (0.25 * boxConfig.width + pieRWidth),
        (0.5 * boxConfig.height)
    ],
]
const getPercentage = (number)=>{ return number*100+'%';}

option = {
    backgroundColor: "#0f375f",
    legend: {
        show: false,
    },
    tooltip: {
        show: false,
    },
    xAxis: {
        show:false,
    },
    yAxis: {
        show:false,
    },
    series: [{
        left:0,
        right:'50%',
        top:0,
        bottom:0,
        startAngle:pieInnerRate/2 * 360,
        name: '半径模式',
        type: 'pie',
        radius: [getPercentage(boxConfig.circleWidth1),getPercentage(boxConfig.circleWidth2)],
        center: ['50%', '50%'],
        data: pieData,
        label: {
            show: false,
        },
        labelLine: {
            show: false,
        },        
    },{
        left:getPercentage(boxConfig.moreLeft),
        right: getPercentage(boxConfig.moreRight),
        top:getPercentage(boxConfig.moreTop),
        bottom:getPercentage(boxConfig.moreBottom),
        type: 'funnel',
        minSize:'100%',
        data: partData,
        label: {
            show: true,
            color: '#FFF',
        },
        labelLine: {
            show: false,
        },
    },{
      type: 'custom',
      renderItem: function (params) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        return {
          type: 'polygon',
          shape: {
            points: pointsPosition,
          },
          style: {
            fill: 'rgba(0,122,255,.4)',
            stroke: 'rgba(0,122,255,1)',
          },
        };
      },
      clip: true,
      data: []
    }]
};
// 延迟中间蒙版显示
setTimeout(()=>{        
    myChart.appendData({
        seriesIndex:'2',
        data:[0]
    })
},300)