Echarts环形渐变柱状图

echarts yekong

wanjunshijiecom 2021-10-04 at 15.01.10

    drawLine () {
      console.log($('#echarts1').width())
      $('#echarts1').height($('#echarts1').width() * 0.84)
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var pieOption = {
          title: '总体情况',
          data: [
            {
              value: 1048,
              name: '分类1',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(22, 239, 237, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(17, 118, 255, 1)'
                  }
                ])
              }
            },
            {
              value: 735,
              name: '分类2',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(73, 89, 241, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(31, 57, 150, 1)'
                  }
                ])
              }
            },
            {
              value: 580,
              name: '路面工程',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(74, 168, 255, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(72, 111, 255, 1)'
                  }
                ])
              }
            },
            {
              value: 484,
              name: '安全设施',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(22, 239, 237, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(17, 118, 255, 1)'
                  }
                ])
              }
            },
            {
              value: 300,
              name: '原材料和产品',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(0, 146, 151, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(46, 207, 133, 1)'
                  }
                ])
              },
            },
            {
              value: 300,
              name: '原材料和产品',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(11, 70, 206, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(143, 102, 248, 1)'
                  }
                ])
              },
            },
            {
              value: 300,
              name: '原材料和产品',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(46, 144, 255, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(13, 83, 163, 1)'
                  }
                ])
              },
            },
            {
              value: 300,
              name: '原材料和产品',
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(29, 169, 234, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(44, 219, 206, 1)'
                  }
                ])
              },
            },
          ],
        },
        option = {
          title: {
            text: '40.4%',
            // text: '{a| 40.4}' + '{b| %} ',
            // formatter: [
            //   '{a| 40.4}',
            //   '{b| %}'
            // ].join('\n'),
            textStyle: {
              color: 'rgba(15, 255, 255, 1)',
              fontSize: 28
            },
            itemGap: 20,
            left: 'center',
            top: 'center',
            rich: {
              a: {
                color: 'rgba(15, 255, 255, 1)',
                fontSize: 28
              },
              b: {
                color: 'rgba(154, 171, 209, 1)',
                fontSize: 18
              },
            }
          },
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              type: 'pie',
              radius: ['80%', '90%'],
              center: ['52%', '50%'],
              clockwise: false,
              labelLine: {
                normal: {
                  length: 5,
                  length2: 5,
                  lineStyle: {
                    color: '#61b7ce',
                  },
                },
              },
              label: {
                show: false,
                color: 'rgba(255,255,255,0.65)',
              },
              data: pieOption.data ? pieOption.data : 0,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    }
喜欢