Echart样例

# Echart 实现半圆

类似下面这样的效果

代码

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      startAngle: -180, // 起始角度旋转-180
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 100, name: 'Search Engine' },
        { value: 100, name: 'Direct' },
        { value: 100, name: 'Email' },
        { value: 100, name: 'Union Ads' },
        { value: 100, name: 'Video Ads' },
        // 前五个为真实数据 最后一个透明的为假的占位数据
        {
          name: 'bottom',
          value: 500,
          itemStyle: {
            color: 'transparent'
          }
        }
      ]
    }
  ]
}

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

关键之处也就是data的三个部分，第一个代表的是当前用量(下图橘黄色部分)，第二个即是下图天蓝色的部分，代表总量减去当前用量，第三部分的值等于总量，颜色透明，其实显示出来就是圆环图的下半部分。这样的话，上半部分的值其实是等于下半部分的值的，整个圆环的总值是两倍的总量。（障眼法...）

#vue

上次更新: 2023/04/05, 09:41:10

← 深入响应式原理我的Vue指令库→