• 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();
      });
    
    })();
  • 相关阅读:
    Guzz入门教程
    设计模式开题
    纪录idea不能创建class类问题(Cannot Create Class)
    dbrouter实现流程图
    记录一次concurrent mode failure问题排查过程以及解决思路
    程序员的自我修养
    CyclicBarrier之共享锁的理解
    sed选项详解(options)
    sed 范围查找
    Sed命令
  • 原文地址:https://www.cnblogs.com/xiaoliziaaa/p/13265910.html
Copyright © 2020-2023  润新知