pie 饼图

 

1最简单的饼图

 

 

 

// 定制饼图box4饼形图-年龄分布
(function () {
  const box4 = document.getElementById('box4')
  const mycharts = echarts.init(box4)
  const pieData = [
    { value: 1, name: "0岁以下" },
    { value: 4, name: "20-29岁" },
    { value: 2, name: "30-39岁" },
    { value: 2, name: "40-49岁" },
    { value: 1, name: "50岁以上" }

  ]

  const option = {
    color: [
      "#065aab",
      "#066eab",
      "#0682ab",
      "#0696ab",
      "#06a0ab",
    ],
    title: {
      text: '4 饼形图-年龄分布',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 400
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',

    },
    legend: {
      orient: 'horizontal',//水平
      left: 'center',
      bottom: 2,
      textStyle: {
        color: '#4c9bfd',
        fontSize: 12,
        fontWeight: 400
      },
      data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
    },
    series:
    {
      name: '访问来源',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
      radius: ["30%", "50%"],
      //  控制位置
      center: ["50%", "50%"],
      labelLine: {
        show: false
      },
      data: pieData
    }

  };
  mycharts.setOption(option)

  window.addEventListener("resize", function () {
    myChart.resize();
  });

})();