7.水波球

 

下载插件：npm install echarts-liquidfill --save

引入插件：import 'echarts-liquidfill/src/liquidFill.js';

 

<template>
  <div>
    <div ref="chart1" class="chart"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import 'echarts-liquidfill/src/liquidFill.js';
export default {
  data() {
    return {
      chartOption: {
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
          {
            offset: 0,
            color: "#010612"
          },
          {
            offset: 1,
            color: "#091638"
          }
        ]),
        graphic: [],
        series: []
      }
    };
  },
  async mounted() {
    const chart = echarts.init(this.$refs.chart1);
    chart.setOption(this.chartOption);
    await this.fetchData();
  },
  methods: {
    async fetchData() {
      //获取接口数据
      let attrs = [
        {name: "总用户数",value: 518167,center_l: "25%"},
        {name: "买家数",value: 4167,center_l: "50%"},
        {name: "卖家数",value: 18167,center_l: "75%"}];
      let series1 = [[0.6, 0.6, 0.6],[0.1, 0.1, 0.1],[0.2, 0.2, 0.2]];
      let series2 = [];
      for (var i = 0; i < series1.length; i++) {
        var item = {
          type: "liquidFill",
          radius: "50%",
          center: [attrs[i].center_l, "50%"],
          //  shape: 'roundRect',
          data: series1[i],
          backgroundStyle: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              colorStops: [
                {
                  offset: 1,
                  color: "rgba(4,33,77, 0)"
                },
                {
                  offset: 0.5,
                  color: "rgba(4,33,77, .5)"
                },
                {
                  offset: 0,
                  color: "rgba(4,33,77, 1)"
                }
              ],
              globalCoord: false
            }
          },
          outline: {
            borderDistance: 5,
            itemStyle: {
              borderWidth: 5,
              borderColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(50,115,233, 1)"
                  },
                  {
                    offset: 0.5,
                    color: "rgba(50,115,233, .5)"
                  },
                  {
                    offset: 1,
                    color: "rgba(50,115,233, 1)"
                  }
                ],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: "#000"
            }
          },
          color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: "rgba(72,107,254, 0.8)"
                },
                {
                  offset: 0.75,
                  color: "rgba(21,216,238, .5)"
                },
                {
                  offset: 0,
                  color: "rgba(72,107,254, 1)"
                }
              ],
              globalCoord: false
            }
          ],
          label: {
            normal: {
              //此处没有生效，本地生效
              textStyle: {
                fontSize: 30,
                color: "#e6e6e6"
              },
              formatter: function(params) {
                return;
              }
            }
          }
        };
        series2.push(item);
      }
      //将数据渲染到echarts图
      const chart = echarts.init(this.$refs.chart1);
      chart.setOption({
        series: series2
      });
    }
  }
};
</script>
<style scoped lang="scss">
.chart {
  width: 100%;
  height: 300px;
}
</style>