Echarts 环形图 自定义配置_echarts环形图位置

业务需求实现一个圆环图，看着简单，做起来卡卡的……

效果图：

步骤：
1、从echarts官网上复制一个最基本的饼图
2、在series中设置饼图的半径 和 饼图的中心(圆心)坐标 形成圆环

3、设置圆环渐变色 color 、线性渐变

4、图例说明与图表呈横向排列，设置：legend
细节点：
（1）图例的图标改为圆形
（2）图例的图标在左，文字在右
（3）右边图例与圆环图位置水平居中
（4）自定义图例文字样式，文字之间有间隔，文字颜色尺寸等，使用 rich

实现：

5、图表的标题始终与圆环图保持居中

6、设置圆环内文字始终在圆环的正中间，并且自适应

7、设置hover圆环时有阴影：series 的 emphasis 属性

完整实现：
组件：

<template>
  <div ref="treeChartCommon" :style="{ height: '242px' }"></div>
</template>

<script>
export default {
  name: 'eCharts',
  props: {
    chartData: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      pieData: [],
    }
  },
  mounted() {
    this.showChart()
  },
  methods: {
    showChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.treeChartCommon)
      myChart.clear()

      this.pieData = this.chartData.pieData
      const list = this.pieData

      // 指定图表的配置项和数据
      var option = {
        //标题
        title: {
          text: this.chartData.pieTitle,
          x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: 'bottom', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontSize: 14,
            fontWeight: 'normal',
            color: '#333333',
          },
          left: '25%',
          top: '80%',
          textAlign: 'center', // 标题始终和图表保持居中
        },
        // 设置圆环渐变色
        color: [
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 右 下 左 上
            {
              offset: 0,
              color: '#65D161',
            },
            {
              offset: 1,
              color: '#8AE587',
            },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#5393E7',
            },
            {
              offset: 1,
              color: '#9EC8FF',
            },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            //0, 1, 1, 0
            {
              offset: 0,
              color: '#F5E127',
            },
            {
              offset: 1,
              color: '#FFF381',
            },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#FFC772',
            },
            {
              offset: 1,
              color: '#FFA51E',
            },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#FF8A8A',
            },
            {
              offset: 1,
              color: '#EC6161',
            },
          ]),
        ],

        legend: {
          itemWidth: 8,
          itemHeight: 8,
          icon: 'circle',
          x: 'right',
          y: 'center',
          orient: 'vertical', //设置图例排列纵向显示
          align: 'left', //设置图例中文字位置在icon标识符的右侧
          left: '50%',
          top: '20%',
          itemGap: 10, //设置图例之间的间距
          padding: [0, 0, 0, 0], //设置图例与圆环图之间的间距

          formatter: function (name) {
            //该函数用于设置图例显示后的百分比
            var total = 0
            var value
            list.forEach((item) => {
              total += item.value
              if (item.name === name) {
                value = item.value
              }
            })
            var p = ((value / total) * 100).toFixed(1) //求出百分比,保留2位小数
            // return `${name}  ${value}件  ${p}%`
            return `{a|${name}}{b|${value}件}{c|${p}%}` //返回出图例所显示的内容是名称+百分比
          },
          // 自定义图例文字样式
          textStyle: {
            rich: {
              a: {
                color: '#333333',
                padding: [0, 10, 0, 0],
                fontSize: 12,
              },
              b: {
                color: '#666666',
                padding: [0, 10, 0, 0],
                fontSize: 12,
              },
              c: {
                color: '#666666',
                fontSize: 12,
              },
            },
          },
        },
        graphic: [
          // 设置圆环内文字始终在圆环的正中间
          {
            type: 'group',
            left: '25%',
            top: '36%',
            bounding: 'raw',
            children: [
              {
                type: 'text',
                style: {
                  text: this.chartData.satisfaction,
                  fontSize: 24,
                  fill: '#333333', //文字的颜色
                  textVerticalAlign: 'middle',
                  textAlign: 'center',
                },
              },
            ],
          },
          {
            type: 'group',
            left: '25%',
            top: '46%',
            bounding: 'raw',
            children: [
              {
                type: 'text',
                style: {
                  text: '满意度',
                  fontSize: 14,
                  fill: '#333333', //文字的颜色
                  textVerticalAlign: 'middle',
                  textAlign: 'center',
                },
              },
            ],
          },
        ],
        calculable: true,
        series: [
          {
            name: '企业类型',
            type: 'pie',
            radius: ['42%', '70%'], //饼图的半径，数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。可以将内半径设大显示成圆环图, 设置内半径和外半径，形成环状
            center: ['25%', '40%'], //饼图的中心(圆心)坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。这里的center一旦设置, 则 graphic/legend 里的内容位置也要相应进行调整
            roseType: 'radius',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: true,
                },
              },
              emphasis: {
                shadowColor: 'rgba(4, 116, 0, 0.3)',
                shadowBlur: 10,
                // label: {
                //   show: true,
                // },
              },
            },
            data: this.pieData,
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

      window.addEventListener('resize', function () {
        //浏览器大小调整echarts随之改变
        myChart.resize()
      })
    },
  },
}
</script>
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

页面中调用组件：

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <DoughnutChart :chartData="chartData_1" />
    </el-col>
    <el-col :span="8">
      <DoughnutChart :chartData="chartData_2" />
    </el-col>
    <el-col :span="8">
      <DoughnutChart :chartData="chartData_3" />
    </el-col>
  </el-row>
</template>

<script>
import DoughnutChart from './components/doughnutChart.vue'
export default {
  components: {
    DoughnutChart,
  },
  data() {
    return {
      chartData_1: {},
      chartData_2: {},
      chartData_3: {},
    }
  },
  created() {
    this.chartData_1 = {
      pieData: [
        {
          value: 113,
          name: '5.0分',
        },
        {
          value: 101,
          name: '4.0分',
        },
        {
          value: 89,
          name: '3.0分',
        },
        {
          value: 82,
          name: '2.0分',
        },
        {
          value: 35,
          name: '1.0分',
        },
      ],
      pieTitle: '服务响应时效',
      satisfaction: '90%',
    }
    this.chartData_2 = {
      pieData: [
        {
          value: 113,
          name: '5.0分',
        },
        {
          value: 101,
          name: '4.0分',
        },
        {
          value: 89,
          name: '3.0分',
        },
        {
          value: 82,
          name: '2.0分',
        },
        {
          value: 35,
          name: '1.0分',
        },
      ],
      pieTitle: '服务人员态度',
      satisfaction: '80%',
    }
    this.chartData_3 = {
      pieData: [
        {
          value: 113,
          name: '5.0分',
        },
        {
          value: 101,
          name: '4.0分',
        },
        {
          value: 89,
          name: '3.0分',
        },
        {
          value: 82,
          name: '2.0分',
        },
        {
          value: 35,
          name: '1.0分',
        },
      ],
      pieTitle: '处理方式',
      satisfaction: '78%',
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
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