vue echarts 扇形封装

先上效果图:

有这种图的引入调用就行了

import Ring from '@/components/EchartsModule/Ring.vue'

components: { Ring,},
  data() {
    return {
      echartsList: [
        { title: '平台分析', IdName: 'Platform', XTitle: '', YTitle: '' },
        { title: '城市分析', IdName: 'City', XTitle: '数量', YTitle: '城市' },
        { title: '商品品牌分析', IdName: 'ProductBrand', XTitle: '数量', YTitle: '商品品牌' },
        { title: '店铺品牌分析', IdName: 'StoreBrand', XTitle: '数量', YTitle: '店铺品牌' },
      ],
      platformList: [{ key: "pupu", doc_count: 8978, percent: "0.10%", title: "朴朴超市" },
      { key: "ddmaicai", doc_count: 18377, percent: "0.21%", title: "叮咚买菜" },
      { key: "missfresh", doc_count: 23800, percent: "0.27%", title: "每日优鲜" },
      { key: "hema", doc_count: 27003, percent: "0.31%", title: "盒马" },
      { key: "rtmart", doc_count: 99820, percent: "1.15%", title: "大润发" },
      { key: "vanguard", doc_count: 168429, percent: "1.95%", title: "华润万家" },
      { key: "pdj", doc_count: 463149, percent: "5.35%", title: "京东到家" },
      { key: "dmall", doc_count: 743144, percent: "8.58%", title: "多点" },
      { key: "ele", doc_count: 3311648, percent: "38.25%", title: "饿了么" },
      { key: "meituanwm", doc_count: 3793943, percent: "43.82%", title: "美团" },
      ],
      CityList: [
        { key: 110000, doc_count: 996548, percent: "28.84%", title: "北京" },
        { key: 310000, doc_count: 487520, percent: "14.11%", title: "上海" },
        { key: 440300, doc_count: 384457, percent: "11.13%", title: "深圳" },
        { key: 441900, doc_count: 283428, percent: "8.20%", title: "东莞" },
        { key: 120000, doc_count: 260665, percent: "7.54%", title: "天津" },
        { key: 440100, doc_count: 236849, percent: "6.86%", title: "广州" },
        { key: 320100, doc_count: 211581, percent: "6.12%", title: "南京" },
        { key: 330100, doc_count: 209894, percent: "6.08%", title: "杭州" },
        { key: 320500, doc_count: 203020, percent: "5.88%", title: "苏州" },
        { key: 420100, doc_count: 181021, percent: "5.24%", title: "武汉1回答武2汉3武汉" },
      ]
    }
  },

        <div class="echarts-box flexColumn" v-for="item, index in echartsList" :key="index">
          <div class="title-box flexRow">
            <p class="title-name">{{ item.title }}</p>
            <p class="flexRow" @click="OpenRegister">
              <span><svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconiconmore"></use>
                </svg></span>
              <span>全部数据</span>
            </p>
          </div>
          <div class="picture" :id="item.IdName">
            <Ring :ListData="platformList" :id="item.IdName" v-if="index == 0"></Ring>
            <CylindricalY v-else :ListData="CityList" :id="item.IdName" :XName="item.XTitle" :YName="item.YTitle">
            </CylindricalY>
          </div>
        </div>

组件封装代码如下:

<template>
  <div class="Ring-box" :id="id"></div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    ListData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: () => 'Cylindrical'
    }
  },
  mounted() {
    this.Drawing(this.id, this.ListTidy(this.ListData.reverse()))
  },
  methods: {

    //画圆形图
    Drawing(id, list) {
      var that = this;
      var colorList = [
        "#73a0fa",
        "#73deb3",
        "#e689ee",
        "#f7c739",
        "#eb7e65",
        "#83d0ef",
        "#a285d2",
        "#ffab67",
        "#46a9a8",
        "#ffa8cc",
        "#8787C0",
      ];
      // var dom = this.$refs[name];
      var dom = document.getElementById(id);
      var myChart = this.$echarts.init(dom);
      var option;
      var obj = {};
      //判断是否有数据
      if (list) {
        list.forEach(item => {
          obj[item.key] = item.value;
        });
      }
      const downloadJson = obj;
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = canvas.height = 100;
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.globalAlpha = 0.08;
      ctx.font = "20px Microsoft Yahei";
      ctx.translate(50, 50);
      ctx.rotate(-Math.PI / 4);
      option = {
        backgroundColor: {
          type: "pattern",
          image: canvas,
          repeat: "repeat",
        },
        tooltip: {
          trigger: "item",
          formatter: function (e) {
            var { name, value } = e;
            value = that.NumberDealWith(value)
            return name + " : " + value
          },
          extraCssText: "padding:6px 10px",
          // position: ["center", "center"],
        },
        legend: {
          orient: "vertical",
          right: "6%",
          top: "center",
          textStyle: {
            color: "#303030",
            offset: [30, 40],
          },
          selectorLabel: {
            fontSize: 20,
            offset: [30, 40],
            backgroundColor: "red",
          },
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          align: "left",
          formatter: function (name) {
            var total = 0;
            var tarValue;
            for (let i = 0, l = list.length; i < l; i++) {
              total += list[i].value;
              if (list[i].key == name) {
                tarValue = list[i].value;
              }
            }
            let p = parseFloat(((tarValue / total) * 100).toFixed(2));
            return name + " : " + p + "%";
          },
        },
        series: [
          {
            type: "pie",
            radius: [0, "60%"],
            center: ["38%", "50%"],
            data: Object.keys(downloadJson).map(function (key) {
              return {
                name: key.replace(".js", ""),
                value: downloadJson[key],
              };
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              // position: "aside",
              show: false,
            },
            itemStyle: {
              color: function (params) {
                var index = params.dataIndex;
                var multiple = parseInt(params.dataIndex / colorList.length);
                if (params.dataIndex >= colorList.length) {
                  index = params.dataIndex - multiple * colorList.length;
                }
                return colorList[index];
              },
            },
          },
        ],
        graphic: [
          {
            type: "image",
            left: "25%",
            top: "45%",
            z: 100,
            bounding: "raw",
            style: {
              image: "https://www.o2omind.com/img/logo_syf.png",
              width: 144,
              height: 36,
              opacity: 0.4,
            },
          },
        ],
      };
      this.isLoading = false;
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
      window.addEventListener('resize', (() => {
        myChart.resize();
      }))
    },
    //数据值处理
    NumberDealWith(number) {
      if (number < 9999.99) {
        number = parseFloat(number.toFixed(2));
      } else if (number < 9999.9 * 10000) {
        number = parseFloat((number / 10000).toFixed(1)) + "万";
      } else {
        number = parseFloat((number / 10000 / 10000).toFixed(1)) + "亿";
      }
      return number;
    },
    //数组按需整理
    ListTidy(list) {
      var Larr = [];
      if (list) {
        list.forEach((item) => {
          var obj = {};
          obj.key = item.title;
          obj.value = item.doc_count;
          Larr.push(obj);
        });
      }
      return Larr;
    },
  }
}
</script>
<style>

.Ring-box{
  width: 100%;
  height: 100%;
}