Echarts在线免费图表

 
            var pieData = [
  { value: 3, name: '标签1' },
  { value: 33, name: '标签2' }
];
var pieTotal = pieData.reduce(function (total, item) {
  return total + item.value;
}, 0);
var pieInnerRate = pieData[0].value / pieTotal;

var partData = [
  { value: 10, name: '11111' },
  { value: 9, name: '2222' },
  { value: 10, name: '3333' }
];
var boxConfig = {
  width: myChart.getWidth(),
  height: myChart.getHeight(),
  circleWidth1: 0.7,
  circleWidth2: 0.9,
  moreLeft: 0.6,
  moreRight: 0.1,
  moreTop: 0.3,
  moreBottom: 0.3
};
var pieRL =
  boxConfig.width / 4 > boxConfig.height / 2
    ? boxConfig.height / 2
    : boxConfig.width / 4;
var pieRWidth = pieRL * boxConfig.circleWidth2;

var 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]
];
var pielegend = [];
for (var s = 0; s < pieData.length; s++) {
  console.log(pieData[s].name)
  pielegend.push(pieData[s].name);
}
option = {
  backgroundColor: '',
  legend: {
    itemGap: 15,
    itemWidth: 20,
    itemHeight: 10,
    textStyle: {
      color: '#595959'
    },
    bottom: 0,
    data: pielegend
  },
  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',
      color: ['rgb(255,198,58)', 'rgb(56,59,150)'],
      radius: ['0', '90%'],
      center: ['50%', '50%'],
      data: pieData,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'inside',
        fontSize: 18,
        formatter: function (param) {
          console.log(param);
          return param.name + ' , ' + param.value;
        },
        borderRadius: 4
      },
      labelLine: {
        show: false
      }
    },
    {
      left: '60%',
      right: '25%',
      top: '30%',
      bottom: '30%',
      type: 'funnel',
      minSize: '100%',
      color: ['rgb(147,190,255)', 'rgb(29,78,223)', 'rgb(55,60,151)'],
      data: partData,
      label: {
        show: true,
        fontSize: 16,
        color: 'black'
      },

      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,0)',
            stroke: '#ccc'
          }
        };
      },
      clip: true,
      seriesIndex: '2',
      data: [0]
    }
  ]
};