Echarts气泡效果

echarts yekong

Echarts气泡效果

    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var plantCap = [{
        name: '21-25岁',
        value: '12133'
      }, {
        name: '31-35岁',
        value: '15989'
      }, {
        name: '41-50岁',
        value: '19844'
      }, {
        name: '26-30岁',
        value: '15371'
      }, {
        name: '20岁及以下',
        value: '3575'
      }, {
        name: '50岁以上',
        value: '15944'
      }, {
        name: '36-40岁',
        value: '11854'
      }];
      var datalist = [{
        offset: [10, 20],
        symbolSize: 100,
        opacity: .95,
        color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#29c0fb'
        }, {
          offset: 1,
          color: '#2dc5b9'
        }]),
      }, {
        offset: [20, 70],
        symbolSize: 95,
        opacity: .95,
        color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#35d17e'
        }, {
          offset: 1,
          color: '#49ddb2'
        }]),
      }, {
        offset: [48, 80],
        symbolSize: 90,
        opacity: .95,
        color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#e5d273'
        }, {
          offset: 1,
          color: '#e4a37f'
        }]),
      }, {
        offset: [40, 20],
        symbolSize: 90,
        opacity: .95,
        color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#29c0fb'
        }, {
          offset: 1,
          color: '#2dc5b9'
        }]),
      }, {
        offset: [65, 50],
        symbolSize: 65,
        opacity: .95,
        color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#35d17e'
        }, {
          offset: 1,
          color: '#49ddb2'
        }]),
      }, {
        offset: [80, 80],
        symbolSize: 68,
        opacity: .7,
        color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#e5d273'
        }, {
          offset: 1,
          color: '#e4a37f'
        }]),
      }, {
        offset: [80, 20],
        symbolSize: 65,
        opacity: .68,
        color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#29c0fb'
        }, {
          offset: 1,
          color: '#2dc5b9'
        }]),
      }];
      var datas = [];
      for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
          name: item.name + '\n' + item.value,
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize,
          label: {
            normal: {
              textStyle: {
                fontSize: 13,
                lineHeight: 17,
              }
            }
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity
            }
          },
        })
      }
      var option = {
        grid: {
          show: false,
          top: 10,
          bottom: 10
        },
        xAxis: [{
          gridIndex: 0,
          type: 'value',
          show: false,
          min: 0,
          max: 100,
          nameLocation: 'middle',
          nameGap: 5
        }],
        yAxis: [{
          gridIndex: 0,
          min: 0,
          show: false,
          max: 100,
          nameLocation: 'middle',
          nameGap: 30
        }],
        series: [{
          type: 'scatter',
          symbol: 'circle',
          symbolSize: 120,
          label: {
            normal: {
              show: true,
              formatter: '{b}',
              color: '#fff',
              textStyle: {
                fontSize: '20'
              }
            },
          },
          itemStyle: {
            normal: {
              color: '#00acea'
            }
          },
          data: datas
        }]
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢