1.完整的HTML代码

2.定制需求

第一步：参考官方例子，熟悉里面参数具体含义

tootip 含义解析

series 含义解析

option = {// 提示框组件tooltip: {// trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示trigger: 'item',// 格式化提示内容：// a 代表series系列图表名称  // b 代表series数据名称 data 里面的name    // c 代表series数据值 data 里面的value   // d代表  当前数据/总数据的比例formatter: "{a} 
{b} : {c} ({d}%)"},// 控制图表series: [{// 图表名称name: '点位统计',// 图表类型type: 'pie',// 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%// 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）radius: ['10%', '70%'],// 图表中心位置 left 50%  top 50%  距离图表DOM容器center: ['50%', '50%'],// radius 半径模式，另外一种是 area 面积模式roseType: 'radius',// 数据集 value 数据的值 name 数据的名称data: [{value:10, name:'rose1'},{value:5, name:'rose2'},{value:15, name:'rose3'},{value:25, name:'rose4'},{value:20, name:'rose5'},{value:35, name:'rose6'},{value:30, name:'rose7'},{value:40, name:'rose8'}]}]
};

第二步：按照需求定制

• 需求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：字体略小一些 10px (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
+        } 
+      }
+    ],

• 需求7： 浏览器缩放的时候，图标跟着自动适配

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