Echarts饼图的常见属性配置(图表定制开发)

饼形图 （南丁格尔玫瑰图）

• 官网找到类似实例， 适当分析，并且引入到HTML页面中
• 根据需求定制图表

第二步：按照需求定制

• 需求1：颜色设置

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

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

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

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

 roseType: "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();
  });