Echarts环形图样式效果

echarts yekong

Echarts环形图样式效果

drawLine () {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var echartData = [
        {
          value: 2154,
          name: '学一联中心站',
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: 'rgba(52, 165, 217, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(35, 210, 197, 1)'
                  }
                ]
              )
            }
          }

        },
        {
          value: 3854,
          name: '学三脱中心站',
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: 'rgba(0, 204, 255, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(7, 110, 175, 1)'
                  }
                ]
              )
            }
          }

        },
        {
          value: 3515,
          name: '学三注中心站',
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: 'rgba(56, 172, 247, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(1, 66, 230, 1)'
                  }
                ]
              )
            }
          }

        }]
      var center = ['30%', '50%']
      var option = {
        title: {
          text: '30',
          textStyle: {
            color: 'rgba(1, 221, 237, 1)',
            fontSize: 28,
            align: 'center'
          },
          x: '25%',
          y: 'center'
        },
        legend: {
          orient: 'vertical',
          x: '65%',
          y: 'center',
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: 'rgba(168, 230, 243, 1)'
          },
          itemGap: 20,
          data: ['学一联中心站', '学三脱中心站', '学三注中心站']
        },

        series: [
          {
            // name: '学一联中心站',
            type: 'pie',
            itemStyle: {
              normal: {
                borderWidth: 3,
                borderColor: '#030d22'
              }
            },
            center: center,
            radius: ['65%', '90%'],
            hoverAnimation: false,
            color: ['rgba(36, 209, 198, 1)', 'rgba(0, 201, 253, 1)', 'rgba(3, 70, 231, 1)'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: echartData
          },
          {
            name: '小环',
            type: 'gauge',
            splitNumber: 10,
            radius: '60%',
            center: center,
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#0F275F',
                width: 1
              },
              length: 1,
              splitNumber: 10
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          },
          {
            type: 'pie',
            name: '饼状背景',
            radius: ['0%', '50%'],
            center: center,
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: '#0B1C44'
                }, {
                  offset: 1,
                  color: '#0B1C44'
                }]),
              }
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    }
喜欢