echarts多个饼图环图中间固定文字,鼠标移入后出现相应的提示_echarts环形图中间文字随着鼠标变化

项目中遇到这种需求,有两种解决方法,
一.在echarts的配置手册中搜graphic属性,并配置,可以在圈内显示固定的文字

graphic: [
           { //环形图中间添加文字
                type: 'text', //通过不同top值可以设置上下显示
                left: 'center',
                top: '55%',
                style: {
                    text: join,
                    textAlign: 'center',
                    fill: '#1eb4ff', //文字的颜色
                    width: 30,
                    height: 30,
                    fontSize: 14,
                    fontFamily: "Microsoft YaHei",
               }
            }
         ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ps:不过这样写有个弊端,就是必须写4个环图并配置属性,非常麻烦.于是提供下面一种做法.
二.搜索echarts中的series属性,可以配置多个饼图或者环图,不过此时它们会重叠在一起,然后搜索series.center属性,可以在配置series时,改变每个图的位置.结合下面代码的第一个series配置看.

let dom = this.$refs.classDataPic
let myChart = this.$echarts.init(dom)
myChart.setOption({
      tooltip: {  //此处配置鼠标移动对应区域时的黑色弹框
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
       },
       series: [
           {
               name: '发布课堂',     //配置formatter时候会用到(就是{a})
               type: 'pie',
               radius: ['45%', '55%'],    // 配置饼图和环图的内圆和外圆的大小
               center: ['13%', '50%'],   //配置图形的位置,前面一个是x轴,后面一个是y轴,'50%'代表是水平居中
               avoidLabelOverlap: false,
               label: {
                   normal: {
                       show: false,    //默认显示关闭,如果此处是true,则数据重叠
                       position: 'center',    //显示的位置,center是饼环图中间显示,
                       formatter: `{a}\n${7}`     //此处的7为假数据,其实就是下面data数组中的value相加,都可以取到的,但是此处都是模拟数据
                   },
                   emphasis: {
                       show: true,
                   }
               },
               data: [
                   { value: 5, name: '公开课', label: { show: true } },  
                   { value: 2, name: '私有课', label: { show: false } },
                   //此处label: { show: false }就是不让饼环图中间的数据改变,因为黑色消息窗可以改变,此处固定文本就行了.
               ]
           },
           {
               name: '总用户数',
               type: 'pie',
               radius: ['45%', '55%'],
               center: ['38%', '50%'],
               avoidLabelOverlap: false,
               label: {
                   normal: {
                       show: true,
                       position: 'center',
                       formatter: `{a}\n${50}`
                   },
                   emphasis: {
                       show: true,
                   }
               },
               data: [
                   { value: 18, name: '男', label: { show: true } },
                   { value: 30, name: '女', label: { show: false } },
                   { value: 2, name: '未知', label: { show: false } }
               ]
           },
           {
               name: '实验数',
               type: 'pie',
               radius: ['45%', '55%'],
               center: ['63%', '50%'],
               avoidLabelOverlap: false,
               label: {
                   normal: {
                       show: false,
                       position: 'center',
                       formatter: `{a}\n${18}`
                   },
                   emphasis: {
                       show: true,
                   }
               },
               data: [
                   { value: 12, name: '在线实验', label: { show: true } },
                   { value: 6, name: '非在线实验', label: { show: false } }
               ]
           },
           {
               name: '作业情况',
               type: 'pie',
               radius: ['45%', '55%'],
               center: ['88%', '50%'],
               avoidLabelOverlap: false,
               label: {
                   normal: {
                       show: false,
                       position: 'center',
                       formatter: `{a}\n${12}`
                   },
                   emphasis: {
                       show: true,
                   }
               },
               data: [
                   { value: 4, name: '准时提交', label: { show: true } },
                   { value: 8, name: '超时提交', label: { show: false } }
               ]
           }
       ]
   })
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