首页 > 技术文章 > 圆环分支处线显示报表样式

kkvt 2020-03-10 15:47 原文

option = {

      legend: {
        show: false
      },
      series: [
        {
          type: "pie",
          radius: [20, 50],

          silent: true,
          label: {
            normal: {
              show: true,
              position: "center",
              formatter: item => {
                return `{a|test}\n{p|}\n{b|123}{pre|人}`;
              },
              rich: {
                a: {
                  fontSize: 24,
                  color: "rgba(0,0,0,0.45)"
                },
                p: {
                  width: "100%",
                  height: 24
                },
                b: {
                  fontSize: 48,
                  color: "rgba(0,0,0,0.85)"
                },
                pre: {
                  fontSize: 24,
                  color: "rgba(0,0,0,0.45)"
                }
              }
            },
            emphasis: {
              show: false
            }
          },
          data: [{ value: 0, name: "", selected: true }]
        },
        {
          type: "pie",
          radius: ["35%", "60%"],
          label: {
            align: "left",
            formatter: item => {
              let { name, percent, value } = item;
              name =
                name.length > 7
                  ? `${name.substring(0, 7)}\n${name.substring(6)}`
                  : name;
              percent = `${percent}%`;
              return `${name}\n${value} ${percent}`;
            },
            fontSize:22,
            color: "rgba(0,0,0,.65)"
          },
          data: [
                {value: 1, name: '直达'},
                {value: 2, name: '邮件营销'},
                {value: 3, name: '联盟广告'},
                {value: 4, name: '视频广告'},
                {value: 5, name: '百度'},
                {value: 251, name: '谷歌'},
                {value: 147, name: '必应'},
                {value: 102, name: '其他'}
            ]
        }
      ],
      color: [
        "#635DFF",
        "#1890FF",
        "#13C2C2",
        "#2FC25B",
        "#FACC14",
        "##F04864",
        "#CB56FF",
        "#635DFF"
      ]
    };

 

推荐阅读