echarts饼型

有关饼形图的基础配置

• 1：颜色设置

color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

• 2：修改饼形图大小 ( series对象)

radius:['10%','70%']

• 3： 把饼形图的显示模式改为 半径模式

reseType: "radius",

• 4：数据使用更换（series对象 里面 data对象）

            { value: 20, name: '云南' },
            { value: 26, name: '北京' },
            { value: 24, name: '山东' },
            { value: 25, name: '河北' },
            { value: 20, name: '江苏' },
            { value: 25, name: '浙江' },
            { value: 30, name: '四川' },
            { value: 42, name: '湖北' }

• 5：字体略小些 10 px ( series对象里面设置 )

• 饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置

  series: [
        {
          name: "面积模式",
          type: "pie",
          radius: [30, 110],
          center: ["50%", "50%"],
          roseType: "radius",
          // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
          label: {
            fontSize: 10
          },
        }
      ]
    };

• 6：防止缩放的时候，引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )

• - 连接图表 6 px

  - 连接文字 8 px

• +        // 文字调整
  +        label:{
  +          fontSize: 10
  +        },
  +        // 引导线调整
  +        labelLine: {
  +          // 连接扇形图线长
  +          length: 6,
  +          // 连接文字线长
  +          length2: 8
  +        } 
  +      }
  +    ],

• 6：浏览器缩放的时候，图表跟着自动适配。

• // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function() {
      myChart.resize();
    });