echarts复杂的圆环

<template>
  <div class="mainContent">
    <div class="left">
      <div class="top">
        <ul class="cityOption">
          <li
            :class="{ active: currentCity === item.adcode }"
            v-for="item in cityOpt"
            :key="item.adcode"
            @click="cityEvent(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="mid">
        <ul class="staBox">
          <li>
            <span class="icon icon1"></span>
            <div class="msgBox">
              <p>全国网点总数</p>
              <strong>112 <i class="unit">个</i></strong>
            </div>
          </li>

          <li>
            <span class="icon icon2"></span>
            <div class="msgBox">
              <p>中心仓网总数</p>
              <strong>112 <i class="unit">个</i></strong>
            </div>
          </li>

          <li>
            <span class="icon icon3"></span>
            <div class="msgBox">
              <p>贮存型网点数</p>
              <strong>112 <i class="unit">个</i></strong>
            </div>
          </li>

          <li>
            <span class="icon icon4"></span>
            <div class="msgBox">
              <p>收集型网点数</p>
              <strong>112 <i class="unit">个</i></strong>
            </div>
          </li>

          <li>
            <span class="icon icon5"></span>
            <div class="msgBox">
              <p>网点分布省份数量</p>
              <strong>112 <i class="unit">个</i></strong>
            </div>
          </li>

          <li>
            <span class="icon icon6"></span>
            <div class="msgBox">
              <p>回收电池总电量</p>
              <strong>112 <i class="unit">个</i></strong>
            </div>
          </li>

          <li>
            <span class="icon icon7"></span>
            <div class="msgBox">
              <p>回收电池总重量</p>
              <strong>112 <i class="unit">个</i></strong>
            </div>
          </li>
        </ul>
      </div>
      <div class="h_left_bottom">
        <div class="tabcont_div">
          <div class="tabcont_cont">
            <div class="m_pieChart_div">
              <div class="m_pieChart">
                <lpieCharts
                  ref="lpieCharts"
                  :width="'154px'"
                  :height="'154px'"
                  :colorArr="colorArrPie"
                />
                <div class="m_pieChart_bgS">{{ pieTotalValue }}</div>
              </div>
              <div class="h_cent_cont_sum">全国网点分布（个）</div>
            </div>
            <div class="chart_right">
              <div class="chart_lis" v-for="(item, i) in pieData" :key="i">
                <span
                  class="chart_line"
                  :style="{ background: colorArrPie[i] }"
                ></span>
                <span class="chart_text"
                  >{{ item.label }} <b>{{ item.percenter }}%</b></span
                >
                <div class="chart_num">{{ item.value }}</div>
              </div>
            </div>
          </div>
        </div>
        <span class="css_span"></span>
        <span class="css_span"></span>
        <span class="css_span"></span>
        <span class="css_span"></span>
      </div>

      <div class="mapWrap">
        <iframe
          className="map_iframe"
          width="866px"
          height="697px"
          :src="path"
          frameborder="0"
          allowtransparency="true"
          scrolling="no"
        />
      </div>
    </div>

    <div class="main_right">
      <div class="h_right_title">
        <span class="h_fl_line"></span>
        <h3 class="h_h3_title">业绩概览</h3>
      </div>
      <div class="h_right_cont">
        <div class="h_cent_top">
          <div class="h_cent_top_fl">各省业绩排行</div>
          <div class="h_cent_top_fr">（Top 5）</div>
        </div>
        <div class="h_table_conts">
          <el-table
            v-if="tableData.length !== 0"
            id="globalTable"
            :data="tableData"
            stripe
            height="264px"
            style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <el-table-column prop="a" label="省份" align="center" min-width="100"></el-table-column>
            <el-table-column prop="b" label="网点数量" align="center" min-width="100"></el-table-column>
            <el-table-column prop="c" label="收入（万元）" align="center" min-width="120"></el-table-column>
            <el-table-column prop="d" label="回收量（Mwh）" align="center" min-width="120"></el-table-column>
          </el-table>
          <empty v-else />
        </div>
      </div>
      <div class="h_right_cont">
        <div class="h_cent_top">
          <div class="h_cent_top_fl">电池回收月度统计</div>
          <div class="h_cent_top_fr">（近6个月）</div>
        </div>
        <div class="h_cent_chart">
          <rbarCharts
            ref="rbarCharts"
            :width="'576px'"
            :height="'272px'"
            :legendArr="['电池信息查询', '电池估价', '报废车估价']"
            :unitArr="['万元', '个']"
            :colorArr="['#FFD803', '#1CFBC5', '#20B0FF']"
          />
        </div>
      </div>
      <div class="h_right_cont">
        <div class="h_cent_top">
          <div class="h_cent_top_fl">电池回收概况</div>
          <div class="h_cent_top_fr">
            <div>（近30天）</div>
            <div class="select_css">
              <el-select
                v-model="selectVal"
                popper-class="select_down"
                @change="selectChange"
                size="mini"
              >
                <el-option
                  v-for="(option, i) in seloptions"
                  :key="i"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div class="h_cent_chart">
          <rlineCharts
            ref="rlineCharts"
            :width="'576px'"
            :height="'270px'"
            :legendArr="['三元材料', '磷酸铁锂', '锰酸锂']"
            :unitArr="['吨', 'Mwh']"
            :colorArr="['#1CFBC5', '#FFD803', '#20B0FF']"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lpieCharts from "./network/left/pie.vue";
import rbarCharts from "./network/right/bar.vue";
import rlineCharts from "./network/right/line.vue";
import empty from "@/components/empty/index.vue";
import { sumArr } from "@/assets/scripts/utils";
export default {
  name: "network",
  components: { lpieCharts, rbarCharts, rlineCharts, empty },
  data() {
    return {
      path: "",
      currentCity: 0,
      cityOpt: [
        { name: "全国", adcode: 0 },
        { adcode: "130000", name: "河北" },
        { adcode: "370000", name: "山东" },
        { adcode: "320000", name: "江苏" },
        { adcode: "330000", name: "浙江" },
        { adcode: "510000", name: "四川" },
        { name: "更多省份", adcode: 6 },
      ],

      pieTotalValue: "",
      pieData: [],
      colorArrPie: ["#06FFDB", "#0A6554", "#20B0FF", "#6657CE", "#FFD803"],
      tableData: [],
      selectVal: "",
      seloptions: [
        { label: "电量", value: "1" },
        { label: "电量1", value: "11" },
        { label: "电量2", value: "12" },
      ],
    };
  },
  created() {
    this.path = window.location.host + "/#/map";

    this.getlpieCharts();
    this.getTableData();
    this.getrbarCharts();
    this.getrlineCharts();
  },
  methods: {
    sumArr,
    cityEvent(row) {
      this.currentCity = row.adcode;
      if (row.adcode !== 6) {
        let cityType = row.adcode === 0 ? "country" : "province";
        this.path =
          window.location.host +
          "/#/map" +
          "?type=" +
          cityType +
          "&code=" +
          row.adcode;
      }
    },
    
    getTableData() {
      // this.$http.get('/prod-api/screen/v2/homePage/alarm/trend')
      // .then(res => {
      //   this.trendObj = res.data
      this.$nextTick(() => {
        // this.$refs.lineCharts.drawLine(res.data)
        let dataList = [
          { a: 62.2, b: "10", c: "小动力换电", d: 111 },
          { a: 52.2, b: "10", c: "小动力换电", d: 111 },
          { a: 42.2, b: "10", c: "小动力换电", d: 111 },
          { a: 32.2, b: "10", c: "小动力换电", d: 111 },
          { a: 42.2, b: "10", c: "小动力换电", d: 111 },
        ];
        this.tableData = dataList;
      });
      // })
      // .catch(() => {})
    },

    selectChange(val) {
      console.log(val);
      this.getrlineCharts();
    },
    
    getlpieCharts() {
      // this.$http.get('/prod-api/screen/v2/homePage/alarm/trend')
      // .then(res => {
      //   this.trendObj = res.data
      this.$nextTick(() => {
        // this.$refs.lineCharts.drawLine(res.data)
        let dataList = [
          { value: 62.2, percenter: "10", label: "小动力换电" },
          { value: 17.3, percenter: "10", label: "基站UPS+备电" },
          { value: 6.2, percenter: "10", label: "移动储能" },
          { value: 9.1, percenter: "10", label: "农机电动化" },
          { value: 3.2, percenter: "10", label: "三轮车" },
        ];
        this.pieTotalValue = this.sumArr(dataList); // 求和
        this.pieData = dataList;
        this.$refs.lpieCharts.drawLine(dataList);
      });
      // })
      // .catch(() => {})
    },
    getrbarCharts() {
      // this.$http.get('/prod-api/screen/v2/homePage/alarm/trend')
      // .then(res => {
      //   this.trendObj = res.data
      this.$nextTick(() => {
        // this.$refs.lineCharts.drawLine(res.data)
        let dataList = {
          level1: [
            { label: "8", value: "150" },
            { label: "9", value: "100" },
            { label: "10", value: "100" },
            { label: "11", value: "200" },
            { label: "12", value: "300" },
          ],
          level2: [
            { label: "8", value: "150" },
            { label: "9", value: "100" },
            { label: "10", value: "300" },
            { label: "11", value: "200" },
            { label: "12", value: "100" },
          ],
          level3: [
            { label: "8", value: "150" },
            { label: "9", value: "100" },
            { label: "10", value: "350" },
            { label: "11", value: "250" },
            { label: "12", value: "150" },
          ],
        };
        this.$refs.rbarCharts.drawLine(dataList);
      });
      // })
      // .catch(() => {})
    },
    getrlineCharts() {
      // this.$http.get('/prod-api/screen/v2/homePage/alarm/trend')
      // .then(res => {
      //   this.trendObj = res.data
      this.$nextTick(() => {
        // this.$refs.lineCharts.drawLine(res.data)
        let dataList = {
          level1: [
            { label: "2013-10", value: "611" },
            { label: "2013-11", value: "514" },
            { label: "2013-12", value: "321" },
          ],
          level2: [
            { label: "2012-10", value: "110" },
            { label: "2012-11", value: "140" },
            { label: "2012-12", value: "210" },
          ],
          level3: [
            { label: "2011-10", value: "211" },
            { label: "2011-11", value: "314" },
            { label: "2011-12", value: "421" },
          ],
        };
        this.$refs.rlineCharts.drawLine(dataList);
      });
      // })
      // .catch(() => {})
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" scoped lang="scss">
.mapWrap {
  position: absolute;
  left: 583px;
  top: 221px;
}
.mainContent {
  display: flex;
  flex-direction: row;
  .left {
    margin-right: 99px;
    width: 1413px;

    .top {
      .cityOption {
        display: flex;
        flex-direction: row;
        margin-bottom: 39px;

        li {
          font-family: AlibabaPuHuiTi_3_65_Medium;
          font-weight: 500;
          font-size: 22px;
          color: #f8fffb;
          letter-spacing: 0;
          width: 101px;
          height: 45px;
          background-image: url("../assets/images/select-sm.png");
          background-position: bottom;
          background-repeat: no-repeat;
          background-size: contain;
          text-align: center;
          margin-right: 56px;
          cursor: pointer;

          &.active {
            background-image: url("../assets/images/selected-sm.png");
          }
        }
      }
    }
    .mid {
      .staBox {
        margin-bottom: 52px;

        li {
          width: 339.54px;
          height: 86px;
          display: flex;
          flex-direction: row;
          margin-bottom: 21px;
          background-image: url("../assets/images/tubiaodizuo.png");
          background-position: left;
          background-size: contain;
          background-repeat: no-repeat;

          &:last-child {
            margin-bottom: 0;
          }

          .icon {
            width: 60px;
            height: 60px;
            margin-right: 30px;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            margin-top: 8px;
            margin-left: 11px;
          }
          .icon1 {
            background-image: url("../assets/images/quanguowangdianzongshu.png");
          }
          .icon2 {
            background-image: url("../assets/images/zhongxincangwangdianshu.png");
          }
          .icon3 {
            background-image: url("../assets/images/zhucunxingwangdianshu.png");
          }
          .icon4 {
            background-image: url("../assets/images/shoujixingwangdianshu.png");
          }
          .icon5 {
            background-image: url("../assets/images/wangdianfenbushengfenshuliang.png");
          }
          .icon6 {
            background-image: url("../assets/images/huishoudianchizongshuliang.png");
          }
          .icon7 {
            background-image: url("../assets/images/huishoudianchizongzhongliang.png");
          }
          .msgBox {
            p {
              font-family: MicrosoftYaHei;
              font-size: 18px;
              color: #befff6;
              letter-spacing: 0;
              margin-bottom: 4px;
              padding-top: 6px;
            }
            strong {
              font-family: DINAlternate-Bold;
              font-weight: 700;
              font-size: 35px;
              color: #ffffff;
              letter-spacing: 0;
              .unit {
                font-family: MicrosoftYaHei;
                font-size: 12px;
                color: #ffffff;
                letter-spacing: 0;
                text-align: right;
                font-weight: normal;
              }
            }
          }
        }
      }
    }
    .h_left_bottom {
      margin-top: 13px;
      padding-left: 70px;
      height: 264px;
      .tabcont_div {
        position: relative;
        width: 100%;
        .tabcont_cont {
          display: flex;
          align-items: center;
          padding: 30px 0 0;
          .m_pieChart_div {
            position: relative;
            text-align: center;
            .m_pieChart::before {
              content: ""; /* 必需属性，表示生成内容为空 */
              display: block; /* 转换为块级元素 */
              width: calc(100% - 9px); /* 计算宽度，根据需要调整数值 */
              height: calc(100% - 9px); /* 计算高度，根据需要调整数值 */
              border: 2px solid #062827; /* 设置边框样式及大小 */
              border-radius: 50%; /* 保持边框也为圆形 */
              position: absolute; /* 绝对定位，与外部容器重合 */
              top: 4px; /* 上移像素，根据需要调整数值 */
              left: 4px; /* 左移像素，根据需要调整数值 */
            }
            .m_pieChart {
              position: relative;
              width: 154px;
              height: 154px;
              border-radius: 50%;
              background-color: #10616b;
              .m_pieChart_bgS {
                height: 107px;
                width: 107px;
                position: absolute;
                left: 23px;
                top: 23px;
                border-radius: 50%;
                background: #0c3a41;
                border: 4px solid #062827;

                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 44px;
                color: #ffffff;
                letter-spacing: 0;
              }
            }
            .h_cent_cont_sum {
              margin-top: 16px;
              text-align: center;
              font-weight: 500;
              font-size: 18px;
              color: #befff6;
              letter-spacing: 0;
            }
          }
          .m_twobarChart,
          .m_barChart {
            position: absolute;
            top: 0;
            width: 100%;
            padding: 14px 0px 0 0;
          }
          .chart_right {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            margin-left: 100px;
            .chart_lis:nth-child(5),
            .chart_lis:nth-child(6) {
              margin-top: 41px;
            }
            .chart_lis {
              width: 25%;
              // padding-bottom: 28px;
              .chart_line {
                display: inline-block;
                width: 6px;
                height: 20px;
                line-height: 1;
              }
              .chart_text {
                font-weight: 500;
                font-size: 20px;
                color: #befff6;
                vertical-align: bottom;
                padding-left: 6px;
                b {
                  font-size: 22px;
                }
              }
              .chart_num {
                font-weight: 700;
                font-size: 40px;
                color: #ffffff;
                margin-top: 11px;
                .css_unit {
                  font-weight: 700;
                  font-size: 22px;
                  color: #ffffff;
                }
              }
            }
          }
        }
      }
    }
  }

  .main_right {
    width: 639px;
    .h_right_cont {
      padding: 0 26px;
      margin-top: 23px;
      .h_cent_top_fr {
        position: relative;
        .select_css {
          position: absolute;
          right: -4px;
          top: 4px;
        }
      }
      .h_cent_chart {
        margin-top: 17px;
      }
      .h_table_conts {
        margin-top: 9px;
      }
    }
  }
}
</style>
    

 pie圆环的组件

<template>
  <div
    :id="id"
    class="chartBox"
    :style="{width: width, height: height}"
  />
</template>
  
<script>
  import { debounce, guid } from '@/assets/scripts/utils'
  
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入组件
  require('echarts/lib/chart/pie')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/markLine')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/grid')

  export default {
    name: 'mpieCharts',
    data () {
      return {
        id: 9999,
        myChart: null,
        resizeChart: debounce(() => {
          if (!this.myChart) return
          this.myChart.resize()
        }, 200)
      }
    },
    props: {
      width: {
        type: String,
        default () {
          return '329px'
        }
      },
      height: {
        type: String,
        default () {
          return '390px'
        }
      },
      colorArr: {
        type: Array,
        default: ()=>[]
      }
    },
    created() {
      this.id = this.guid()
    },
    destroyed () {
      window.removeEventListener('resize', this.resizeChart)
      this.myChart && this.myChart.dispose()
    },
    methods: {
      guid,
  
      drawLine (sourceData) {
        this.myChart && this.myChart.dispose()
  
        let option = {
          color: this.colorArr,
          series: [
            {
              type: 'pie',
              name: '',
              hoverAnimation: false, // 鼠标移入不放大
              center: ['50%', '50%'],
              radius: ['70%', '90%'],
              label: {
                normal: {
                  show: false,
                  // position: 'center',
                  // color:'#fff',
                  // formatter: function(params) {
                  //   console.log(params)
                  //   return '{cssNum|' + params.value + '}'; // 返回自定义格式化后的字符串
                  // },
                  // rich: { 
                  //   cssNum:{ 
                  //     fontSize: 44,
                  //     fontWeight: 700,
                  //     color:'#fff'                     
                  //   },         
                  // }             
                },
              },
              emphasis: {
                label: {
                  show: false,
                }
              },
              labelLine: {
                normal: {
                  show: false
                },
              },
              data: sourceData
            },

          ]
        }
        
        this.myChart = echarts.init(document.getElementById(this.id))
        this.myChart.setOption(option)
        window.addEventListener('resize', this.resizeChart)

        // // 添加鼠标移动到饼图上的事件监听器
        // this.myChart.on('mouseover', function (params) {
        //   console.log("鼠标移动到了饼图",params); // params包含了相关参数信息
        //   this.$emit('hoverPieCharts', params.value)
        // });
      }
    }
  }
</script>

<style lang="scss" scoped>
.chartBox {
  z-index: 99;
}
</style>