echarts-饼图，散点图，漏斗图，旭日图

饼图

饼图着重表示占比。一般饼图只需要修改点。
与其他图表相同，也受itemStyle的调节。
相比于其他表，饼图特有的属性有 :
angle系列：startAngle,endAngle,minAngle,padAngle,minShowLabelAngle,
clockwise顺逆时针
半径和中心 radius,center

基本使用

 const d1 = [
    {
      value: 1000,
      name: "d1",
    },
    {
      value: 700,
      name: "d2",
    },
    {
      value: 300,
      name: "d3",
    },
    {
      value: 100,
      name: "d4",
    },
    {
      value: 200,
      name: "d4",
    },
    {
      value: 1,
      name: "d6",
    },
  ];
  let options = {
    series: [
      {
        name: "d1",
        type: "pie",
        data: d1,
      },
    ],
  };

minAngle:最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
minShowLabelAngle: 小于这个角度（0 ~ 360）的扇区，不显示标签（label 和 labelLine）。

 const d1 = [
    {
      value: 1000,
      name: "d1",
    },
    {
      value: 700,
      name: "d2",
    },
    {
      value: 300,
      name: "d3",
    },
    {
      value: 100,
      name: "d4",
    },
    {
      value: 200,
      name: "d5",
    },
    {
      value: 1,
      name: "d6",
    },
  ];
  let options = {
    series: [
      {
        name: "d1",
        type: "pie",
        data: d1,
        label: {
          show: true,
        },
        minAngle: 10,
        // minShowLabelAngle: 6,
      },
    ],
  };

startAngle, endAngle 开始角度和结束角度

 const d1 = [
    {
      value: 1000,
      name: "d1",
    },
    {
      value: 700,
      name: "d2",
    },
    {
      value: 300,
      name: "d3",
    },
    {
      value: 100,
      name: "d4",
    },
    {
      value: 200,
      name: "d5",
    },
    {
      value: 1,
      name: "d6",
    },
  ];
  let options = {
    series: [
      {
        name: "d1",
        type: "pie",
        data: d1,
        label: {
          show: true,
        },
        minAngle: 10,
        //minShowLabelAngle: 6,
        startAngle: 180,
        endAngle: 360,
      },
    ],
  };

radius圆环内圆半径和外圆半径
padAngle 饼图扇区之间的间隔角度

 let options = {
    series: [
      {
        name: "d1",
        type: "pie",
        data: d1,
        label: {
          show: true,
        },
        minAngle: 5,
        //minShowLabelAngle: 6,
        startAngle: 180,
        endAngle: 360,
        padAngle: 5,
        radius: ["60%", "70%"],
        itemStyle: {
          borderRadius: 10,
        },
      },
    ],
  };

可以通过调整圆环的半径来改变圆环的大小，
center 饼图的中心（圆心）坐标，

let options = {
    series: [
      {
        name: "d1",
        type: "pie",
        data: d1,
        label: {
          show: true,
        },
        minAngle: 5,
        //minShowLabelAngle: 6,
        startAngle: 180,
        endAngle: 360,
        padAngle: 5,
        radius: ["60%", "90%"],
        center: ["50%", "50%"],
        itemStyle: {
          borderRadius: 10,
        },
      },
    ],
  };

玫瑰图

玫瑰图是饼图的变种，需要设置roseType
roseType是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式，‘radius’和’area’

 let options = {
    series: [
      {
        name: "d1",
        type: "pie",
        data: d1,
        label: {
          show: true,
          position: "inside",
        },
        minAngle: 5,
        //minShowLabelAngle: 6,
        startAngle: 180,
        endAngle: 360,
        padAngle: 5,
        radius: ["20%", "90%"],

        itemStyle: {
          borderRadius: 10,
        },
        roseType: "radius",
      },
    ],
  };

散点图

散点图着重表达数据本身，数据可以是大量非线性数据。
散点图也会受symbol和itemStyle的调节
其他配置几乎与折线图一致。

 const d2 = [
    [10.0, 3.4],
    [9.3, 4],
    [4, 3.4],
    [5.4, 2.3],
    [7.6, 6, 5],
    [9.8, 5.6],
    [11, 6.6],
    [12.2, 9.8],
  ];
  let options = {
    yAxis: {},
    xAxis: {},
    series: [
      {
        name: "d1",
        type: "scatter",
        data: d2,
      },
    ],
  };

修改点的大小

 let options = {
    yAxis: {},
    xAxis: {},
    series: [
      {
        name: "d1",
        type: "scatter",
        data: d2,
        symbolSize: (value) => {
          console.log(value);
          return (value[0] + value[1]) * 2;
        },
      },
    ],
  };

涟漪散点图

 let options = {
    yAxis: {},
    xAxis: {},
    series: [
      {
        name: "d1",
        type: "effectScatter",
        data: d2,
        label: {
          show: true,
        },
        symbolSize: (value) => {
          console.log(value);
          return (value[0] + value[1]) * 2;
        },
      },
    ],
  };

漏斗图

漏斗图一般用于表示流失关系，比如电商的进入和下单人数的递减关系。
样式受itemStyle的调节。
也有一些特殊的属性：
最大值和最小值:min,max,minSize,maxSize
排序方式sort(倒金字塔或正金字塔)
间距的调节 gap

 const d3 = [
    { value: 2000, name: "进入" },
    { value: 1500, name: "浏览" },
    { value: 1000, name: "下单" },
    { value: 100, name: "成交" },
  ];
  let options = {
    series: [
      {
        name: "d1",
        type: "funnel",
        data: d3,
      },
    ],
  };

maxSize最大值的占比。 minSize最小值的占比。
4000占比为80%，2000占比为40%，最小值100占比为20%

 let options = {
    series: [
      {
        name: "d1",
        type: "funnel",
        data: d3,
        max: 4000,
        maxSize: "80%",
        minSize: "20%",
        gap: 10,
      },
    ],
  };

倒金字塔
sort:“ascending”

 let options = {
    series: [
      {
        name: "d1",
        type: "funnel",
        data: d3,
        max: 4000,
        maxSize: "80%",
        minSize: "20%",
        gap: 10,
        sort: "ascending",
      },
    ],
  };

echarts是根据数据生成的，无法生成等比的漏斗图
可以设置一个等比的漏斗图盖住不等比的
还可以设置z层级，控制图形的前后顺序。

 const d3 = [
    { value: 2000, name: "进入" },
    { value: 1500, name: "浏览" },
    { value: 1000, name: "下单" },
    { value: 100, name: "成交" },
  ];
  const d4 = [
    { value: 2000, name: "进入" },
    { value: 1500, name: "浏览" },
    { value: 1000, name: "下单" },
    { value: 500, name: "成交" },
  ];
  let options = {
    series: [
      {
        name: "d1",
        type: "funnel",
        data: d3,
        label: {
          show: false,
        },
        z: 100,
      },
      {
        name: "d1",
        type: "funnel",
        data: d4,
        z: 200,
        // sort: "ascending",
      },
    ],
  };

旭日图

旭日图可以看成嵌套的饼图，除了和饼图一样表达占比，相对于饼图还可以进一步细化表达每一块更细节的占比。
除了数据的写法与饼图不同外，其他基本相同。

旭日图比饼图多了个children

 const d1 = [
    {
      value: 1000,
      name: "d1",
      children: [
        {
          name: "d1-children1",
          value: 800,
        },
        {
          name: "d1-children2",
          value: 700,
        },
      ],
    },
    {
      value: 700,
      name: "d2",
      children: [
        {
          name: "d2-children1",
          value: 500,
        },
        {
          name: "d2-children2",
          value: 600,
        },
      ],
    },
    {
      value: 300,
      name: "d3",
      children: [
        {
          name: "d3-children1",
          value: 500,
        },
        {
          name: "d3-children2",
          value: 600,
        },
      ],
    },
    {
      value: 400,
      name: "d4",
      children: [
        {
          name: "d4-children1",
          value: 500,
        },
      ],
    },
    {
      value: 200,
      name: "d5",
      children: [
        {
          name: "d5-children1",
          value: 500,
        },
      ],
    },
    {
      value: 1,
      name: "d6",
      children: [
        {
          name: "d6-children2",
          value: 100,
        },
      ],
    },
  ];
  let options = {
    series: [
      {
        name: "d1",
        type: "sunburst",
        data: d1,
        label: {
          show: true,
        },
        minAngle: 10,
      },
    ],
  };