封装以及使用echart饼图

最新推荐文章于 2024-09-06 17:39:42 发布

原创最新推荐文章于 2024-09-06 17:39:42 发布 · 547 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web前端专栏收录该内容

419 篇文章

订阅专栏

本文介绍了一种在Vue中封装ECharts组件的方法，通过创建pieEcharts.vue组件实现了投资分析图表的展示，包括市场打败百分比和不同投资类型的饼图。组件通过props接收微信用户ID，从后端获取投资分配信息，并动态生成图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.封装组件【pieEcharts.vue】

<style lang="scss" scoped>
  .investmentAnalysis {
    margin: 0 14px 11px;
    padding: 0px 9px 12.5px;
    background: #fff;
    .invest-rank {
      width: 320px;
      height: 35px;
      background: rgba(247, 247, 247, 1);
      text-align: center;
      font-size: 12px;
      line-height: 35px;
      color: #666;
      margin: 0 5px;
      .number-color {
        color: #b90901;
        font-size: 17px;
      }
    }
  }
</style>

<template>
  <div>
    <div class="investmentAnalysis">
      <div class="pie-charts"
           ref="chartone"
           style="height: 170px;width: 100%;">
      </div>
      <div class="invest-rank">
        您的投资能力已打败市场<span class="number-color">{{marketPercent}}%</span>的人
      </div>

    </div>
  </div>
</template>
<script>
  //执行成功
  const ERROR_CODE = "ERRORCODE0000";
  //Vuex公共状态动作
  export default {
    props:{
        //微信用户ID
        openid:{
            type:String,
        },
    },
    name: 'pieEcharts',
    data() {
      return {
        marketPercent:'--'
      };
    },
    components: {

    },
    computed: {

    },
    methods: {
      //画折线图
      createChartOne(data, legend, color1) {
        let chartone = this.$echarts.init(this.$refs.chartone);
        chartone.setOption({
          title: {
            text: "配置建议",
            left: '0',
            top: '10'
          },
          grid: {
            left: "25%", // 与容器左侧的距离
            right: "25%", // 与容器右侧的距离
            bottom: '0%'
          },
          color: color1,
          legend: {
            orient: 'vertical',
            top: 'middle',
            x: 'right',
            top: '28%',
            left: '55%',
            icon: "circle",
            itemWidth: 8, // 设置宽度
            itemHeight: 10, // 设置高度
            data: legend
          },
          series: [
            {
              name: "半径模式",
              type: "pie",
              radius: [27, 54],
              center: ["30%", "60%"],
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              data: data
            }
          ]
        });
        window.addEventListener("resize", () => {
          chartone.resize();
        });
      },

    },
    created() {
      //加载屏关闭
      setTimeout(() => {
        document.getElementById('login').style.display = 'none';
      }, 250);
    },
    mounted() {
      // 饼图数据获取
      let parame1 = {
        "functionName": "pushService",
        "methodName": "selectRiskAllocationInfo",
        "data": {
          "openId": this.openid
        }
      }
      this.$post(JSON.stringify(parame1)).then(result => {
        if (result.errorCode == ERROR_CODE && result.data.codeType == 200) {
          console.log("饼图数据======>", result);
          this.marketPercent=result.data.marketPercent;
          let dataArray=result.data.newRiskAllocationList;
          let legend = ["商品型 ","固收型 ", "货币型 ","权益型 ",  "保障类 "];
          let equityPercent = [];
          let color1 = ["#519ee8", "#f25d68","#ecc644", "#2ec4b6", '#86e1ed'];
          dataArray.forEach((e, i) => {
            console.log("balance", e.proportion, legend[i]);
            if (e != 0) {
              legend[i]+=e.proportion;
              equityPercent.push({
                value: e.proportion,
                name: legend[i]
              });
            }
          });
      this.createChartOne(equityPercent, legend, color1);

        }
      });
      
    }
  }
</script>

2.使用【use.vue】

<style lang="scss" scoped>
    
</style>

<template>
  <div class="flex-wrapper">
    <v-pieEcharts></v-pieEcharts>
  </div>
</template>
<script>
  //执行成功
  const ERROR_CODE = "ERRORCODE0000";
  //Vuex公共状态动作
  export default {

    data() {
      return {

      };
    },
    components: {
        'v-pieEcharts':() => import(`../../components/common/echarts/pieEcharts.vue`),
    },
    computed: {

    },
    methods: {
      

    },
    created() {
      //加载屏关闭
      setTimeout(() => {
        document.getElementById('login').style.display = 'none';
      }, 250);
    },
    mounted() {
      
    }
  }
</script>