echarts 之饼形图配置属性

echarts 之配置属性

• 南丁格尔图 roseType: “radius”,
  
• 双层饼形图
  

饼形图

• 配置属性，也就是再 option 里面书写修改图形的样式
  • color：图形的颜色设置 数组
  • title ： 是否显示组件的标题（一般用于显示标题，或者计算总数）
  • tooltip：提示框，用于鼠标滑过的时候，显示当前想要显示的内容
  • formatter：一般用于处理文本的显示，可以玩出各种骚操作
  • legend：显示图例的说明 里面的left方位可以使用的是 位置(center) 和 百分比(5%)
    • textStyle：文本的样式 fontSize color padding等
  • series：用于显示每一个数据 => {},{},{}
    • 注意点：就是若是要显示两层，就是外层的有连接线，里层只是显示 百分比，那么则需要两个{}，然后对于内层只是显示百分比的，需要在label之中 设置一个定位 position: "inner", 表示显示内层
    • type：类型 bar line pie
    • roseType: “radius”, 是否显示南丁格尔图 ‘radius’ 半径展现数据的大小。‘area’ 半径展现数据大小。
    • minAngle：最小占比，就是用于显示占比很小，但是又需要显示的那种
      *radius & center： 半径 & 中心点
    • data：数据的显示，为数组形式
    • itemStyle： 对每一项 进行占比留白 需要设置normal下的 borderColor & borderWidth
    • labelLine：连接线的设计 length: 6, length2:10, 有外线1和外线2 ；lineStyle 设置线的颜色
    • label：就是对series中的每一个数据进行样式的修饰
      • labelLine：是否显示连接线
      • normal：
        • formatter：对文本的修饰 然后对 rich 的样式的使用 "{meony|" + XXX + "}"
        • rich：就是样式的设计 比如：rich:{ money:{ 里面写样式 } }

title: [
  {
    //修改总价格  lastTotal 再外层进行计算后 再显示与标题之中 一般放在正中央
    text: "\n{val|" + lastTotal+ "}",
    top: this.top,
    left: "center",
    textStyle: { // title的文本 样式修饰
      rich: {
        val: {
          fontSize: 20,
          fontWeight: "bold",
          color: "#1A1A1E",
        },
      },
    },
  },
],
 tooltip: {
   trigger: "item", // 触发项 就是每一个item 针对散点和饼形图； axis 针对柱状图 
   borderColor: "rgba(255,255,255,.3)",
   backgroundColor: "rgba(13,5,30,.6)",
   borderWidth: 1,
   padding: 5,
   // 处理文本的显示
   formatter: function (parms) {
     var str =
       parms.marker +
       "" +
       parms.data.name +
       "</br>" +
       "金额：" +
       formatNumber(parms.data.meony) +
       "亿元</br>" +
       "占比：" +
       parseFloat(parms.percent).toFixed(1) +
       "%";
     return str;
   },
 },
 // 显示图例的说明  left 这边可以使用的是 位置 和 百分比 
 legend: {
   left: "center",
   left: "5%",
   bottom: "5%",
   itemWidth: 10,
   itemHeight: 10,
   textStyle: {
     color: "#73747E",
     fontSize: "12",
   },
 },
 series: [
          {
            type: "pie",
            minAngle: 17, //设置扇形的最小占比
            radius: this.radius,
            center: this.pieChartSimpleCenter,
            data: echartData,
            hoverAnimation: false,
            // 对每一项 进行占比留白
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
            labelLine: {
              normal: {
                length: 6,
                length2: 10,
                // lineStyle: {//连接线
                //   color: "#e6e6e6",
                // },
              },
            },
            label: {
              labelLine: {
                show: true,
              },
              normal: {
                formatter: (params) => {
                  return "{meony|" + formatNumber(params.data.meony) + "}";
                },
                rich: {
                  meony: {
                    fontSize: 12,
                    fontWeight: "bold",
                    color: "#1A1A1E",
                  },
                },
              },
            },
          },
          //显示内层
          {
            name: "",
            type: "pie",
            minAngle: 17, //设置扇形的最小占比
            radius: this.radius,
            center: this.pieChartSimpleCenter,
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 3,
              borderColor: "#fff",
            },
            label: {
              color: "#000",
              show: true,
              position: "inner",
              width: 10,
              height: 0,
              lineHeight: 0,
              formatter: function (p) {
                let percent = parseFloat(p.percent).toFixed(1);
                return "\n{white|" + percent + "%}";
              },
              align: "center",
              rich: {
                white: {
                  fontSize: 12,
                  color: "#fff",
                  align: "center",
                  padding: [0, -2, 0, 0],
                },
              },
            },
            labelLine: {
              show: false,
            },
            // 饼形图数据
            data: echartData,
          },
 ],