Echarts 环形效果图

echarts yekong

Echarts 环形效果图

    drawLine () {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var colors = ['rgba(18, 191, 255, 1)', 'rgba(33, 190, 132, 1)']
      var
        option = {
          color: colors,
          legend: {
            orient: 'vertical',
            right: '10%',
            y: 'center',
            itemGap: 30,
            itemWidth: 12,
            itemHeight: 12,
            width: '100%',
            textStyle: {
              color: 'rgba(255, 255, 255, 1)',
              fontSize: FontChart(14)
            },
            formatter: function (name) {
              var data = option.series[0].data
              var total = 0
              var tarValue
              for (var i = 0; i < data.length; i++) {
                total += data[i].value
                if (data[i].name == name) {
                  tarValue = data[i].value
                }
              }
              var v = tarValue
              var p = Math.round(((tarValue / total) * 100))
              return `${name} \n ${p}%`
            },
          },
          tooltip: {
            trigger: 'item',
            show: false,
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '全域客流',
              type: 'pie',
              radius: ['60%', '80%'],
              center: ['30%', '50%'],
              minShowLabelAngle: 0,
              label: {
                normal: {
                  show: false,
                  position: 'center',
                  fontSize: FontChart(14),
                  color: 'auto',
                  formatter: (params) => {
                    return params.value + '\n' + params.name
                  },
                },
                emphasis: {
                  show: false,
                  position: 'center',
                  fontSize: FontChart(14),
                  color: 'auto',
                  formatter: function (value, index) {
                    console.log(value)
                    return '{label|' + value.percent + '%}\n'
                      + '{value|' + value.name + '}'
                  },
                  rich: {
                    label: {
                      padding: 0,
                      align: 'center',
                      verticalAlign: 'middle',
                      fontSize: FontChart(16),
                      color: 'rgba(0, 255, 255, 1)',
                      fontFamily: 'Helvetica Condensed Bold'
                    },
                    value: {
                      align: 'center',
                      color: '#fff',
                      padding: [0, 0, 10, 0],
                      fontSize: FontChart(14),
                      verticalAlign: 'middle',
                    },
                  },
                },
              },
              labelLine: {
                length: 1,
                length2: 20,
                show: false
              },
              data: [{
                name: '社保卡结借阅占比',
                value: 100,
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: '#133CE0',
                    color: new this.$echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {
                          offset: 0,
                          color: 'rgba(33, 190, 132, 1)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(55, 226, 163, 1)'
                        }
                      ]
                    )
                  }
                }
              }, {
                name: '其余借阅占比',
                value: 100,
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: '#133CE0',
                    color: new this.$echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {
                          offset: 0,
                          color: 'rgba(18, 191, 255, 1)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(18, 224, 255, 1)'
                        }
                      ]
                    )
                  }
                }
              }]
            }
          ]
        }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢