Echarts饼状图效果

echarts yekong

Echarts饼状图效果

drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var option = {
        title: {
          text: '评分结果',
          left: '48%',
          top: '10%',
          textAlign: 'center',
          textStyle: {
            color: '#3F9FCE',
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        series: [
          {
            name: '第一个圆环',
            type: 'pie',
            clockWise: false,
            radius: [69, 70],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                shadowBlur: 0,
                shadowColor: '#203665'
              }
            },
            hoverAnimation: false,
            center: ['50%', '50%'],
            data: [{
              value: 0,
              label: {
                show: false,
              }
            }, {
              value: 100,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#2AB8EE'
                },
                emphasis: {
                  color: '#2AB8EE'
                }
              }
            }]
          },
          {
            name: '第一个圆环',
            type: 'pie',
            clockWise: false,
            radius: [0, 80],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                shadowBlur: 0,
                shadowColor: '#203665'
              }
            },
            hoverAnimation: false,
            center: ['50%', '50%'],
            data: [{
              value: 100 - that.data.score,
              itemStyle: {
                normal: {
                  color: hexToRgba('#2c6cc4', 0),
                  shadowBlur: 0
                }
              }
            }, {
              value: that.data.score,
              name: 'invisible',
              label: {
                normal: {
                  rich: {
                    a: {
                      color: '#1AAAE0',
                      align: 'center',
                      fontSize: 40,
                      fontWeight: 'bold'
                    },
                    b: {
                      color: '#2175A5',
                      align: 'center',
                      fontSize: 16,
                      padding: [0, 5, 10, 10]
                    }
                  },
                  formatter: function (params) {
                    return '{a|' + params.value + '}' + '{b|分}'
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'normal',
                    color: '#fff'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: hexToRgba('#2c6cc4', 0.6)
                },
              }
            }]
          },
        ]
      }

      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢