浅浅做个记录

一. 环形图 + 自定义文字

效果

环形图加自定义文字
其中包含的配置点：

  1. 自定义文字 graphic；
  2. 图例文字超过6个省略；
  3. 色彩配置；
  4. 饼图 => 环形；
  5. 不要饼图的指引线和文字；
  6. 色块直接的白色间隔；
  7. title放到圆环中间；

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
const option = {
        title: {
          text: '{b|总人数}',
          subtext: '{a|2,200}',
          // 数据
          subtextStyle: {
            rich: {
              a: {
                fontSize: '32',
                color: '#202122',
                fontFamily: 'DIN Alternate-Bold, DIN Alternate',
              },
            },
          },
          // 总人数
          textStyle: {
            rich: {
              b: {
                fontSize: '14',
                color: '#202122',
                fontFamily: 'PingFang SC-Regular, PingFang SC',
                padding: [0, 0, 0, 10],
              },
            },
          },
          left: '24%',
          top: '38%',
        },
        color: [
          '#5365FF',
          '#21D17A',
          '#24D7E1',
          '#456297',
          '#FED94C',
          '#FC6A4A',
        ],
        // hover 的交互
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        // 图例
        legend: {
          orient: 'vertical',
          right: 110,
          top: 45,
          itemGap: 14,
          icon: 'circle', // 圆形
          textStyle: {
            fontSize: 12,
            color: '#202122',
          },
          // 超过六个字省略
          formatter: function (name) {
            return name.length > 6 ? name.substr(0, 6) + '...' : name;
          },
          data: [
            '微信公众号',
            '线下门店',
            '线下渠道',
            '超过6字省略超过6字省略',
            '外部联系人',
            '其他来源',
          ],
        },
        series: [
          {
            name: '客户来源排名',
            type: 'pie',
            radius: ['60%', '90%'],
            center: ['50%', '50%'],
            right: '40%',
            data: [
              { value: 534, name: '微信公众号' },
              { value: 434, name: '线下门店' },
              { value: 325, name: '线下渠道' },
              { value: 257, name: '超过6字省略超过6字省略' },
              { value: 145, name: '外部联系人' },
              { value: 191, name: '其他来源' },
            ],
            //  间隔
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            // 不要那根线和文字
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
        ],
        // 自定义文字
        graphic: [
          {
            type: 'text',
            z: 100,
            right: 195,
            top: 20,
            style: {
              fill: '#808388',
              text: ['来源'],
              font: '12px PingFang SC-Regular, PingFang SC',
            },
          },
          {
            type: 'text',
            z: 100,
            right: 40,
            top: 20,
            style: {
              fill: '#808388',
              text: ['人数'],
              font: '12px PingFang SC-Regular, PingFang SC',
            },
          },
          {
            type: 'text',
            z: 100,
            right: 30,
            top: 51,
            style: {
              fill: '#202122',
              text: [534, 434, 325, 257, 145, '9,809'].join('\n\n'),
              font: '14px DIN Alternate-Bold, DIN Alternate',
              lineWidth: 100,
            },
          },
        ],
      }

二. 柱状图

效果

柱状图

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
{
        dataset: {
          source: [
             [5, '邀请入群'],
             [146, '短链入群'],
             [232, '扫码入群'],
          ],
        },
        xAxis: {
          name: 'amount', // 用于设置y轴的那一条线
          axisLine: {
            show: false, //这里的show用于设置是否显示x轴那一条线 默认为true
          },
          // 不显示x轴的刻度
          axisTick: {
            show: false,
          },
          // 文字
          axisLabel: {
            color: '#808388',
          },
          splitLine: {
            show: true, //让网格显示
            lineStyle: {
              //网格样式
              color: ['#DCDFE6'], //网格的颜色
              width: 1, //网格的宽度
              type: 'solid', //网格是实实线，可以修改成虚线以及其他的类型
            },
          },
        },
        yAxis: {
          type: 'category',
          interval: 15, // 值之间的间隔
          axisTick: {
            // 刻度对齐 中间
            alignWithLabel: true,
          },
          axisLabel: {
            show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle: {
              //textStyle里面写y轴下的字体的样式
              color: '#202122;',
              fontSize: 12,
              fontFamily: 'PingFang SC-Regular, PingFang SC',
            },
          },
          //用于设置y轴的那一条线
          axisLine: {
            show: true, //这里的show用于设置是否显示y轴那一条线 默认为true
            lineStyle: {
              //lineStyle里面写y轴那一条线的样式
              color: '#DCDFE6',
              width: 1, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
            },
          },
        },
        grid: {
          show: false,
          top: 15, // 一下数值可为百分比也可为具体像素值
          right: 15,
          bottom: 20,
          left: 57,
        },
        series: [
          {
            type: 'bar',
            barWidth: 10, //柱图宽度
            itemStyle: {
              normal: {
                color: '#5365FF',
              },
            },
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product',
            },
          },
        ],
      }

三. 这个是css画的

效果

圆

border上的小圆点会跟着border边缘运动

代码

1
2
3
4
5
6
<div class="circle-wrap flex items-center justify-center">
<div class="circle flex items-center justify-center flex-col">
	<p class="title">客户总数</p>
	<p class="number">23,523</p>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

.circle-wrap {
  width: 172px;
  height: 172px;
  background: #f0f5ff;
  opacity: 1;
  border: 1px solid #d4dafc;
  border-radius: 50%;
  position: relative;

  &::before {
    content: '';
    background: #5964fb;
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    position: absolute;
    left: 44px;
    top: 7px;
    animation: move 4s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
      move1Y 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;

    /* 定义动画 */
    @keyframes move {
      0% {
        left: -2px;
      }

      100% {
        left: 170px;
      }
    }

    @keyframes move1Y {
      0% {
        top: -2px;
      }

      100% {
        top: 170px;
      }
    }
  }

  .circle {
    width: 128px;
    height: 128px;
    background: #5964fb;
    opacity: 1;
    border-radius: 50%;

    .title {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }

    .number {
      font-size: 32px;
      font-family: DIN Alternate-Bold, DIN Alternate;
      font-weight: bold;
      color: #ffffff;
    }
  }
}