echarts饼状图共用组件

最新推荐文章于 2023-05-25 11:23:45 发布

小星星h

最新推荐文章于 2023-05-25 11:23:45 发布

阅读量228

点赞数

本文链接：https://blog.youkuaiyun.com/dqwdnishi/article/details/109092079

版权

本文介绍如何使用ECharts库在Vue应用中创建动态大小的饼图，通过'pieShowId'参数传递图表区域，并实现数据配置和响应式调整。重点在于`initdata`方法中的选项设置和`resize`事件监听。

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

<template>
  <div style="width: 100%;height:100%;text-align: center;">
    <div :id="pieShowId" class="pie" style="width: 100%;height: 100%"></div>
  </div>
</template>

<script>
//import NProgress from 'nprogress'
export default {
  props: ["optionData", "pieShowId", "titleText"], //传递的参数数组，id区分，名字区分
  data() {
    return {
      myChart: {}
    };
  },
  mounted() {
    this.initdata();
    window.addEventListener("resize", () => {
      this.myChart.resize();            //动态计算大小
    });
  },
  methods: {
    initdata() {
      this.myChart = this.$echarts.init(
        document.getElementById(this.pieShowId)
      );
      this.myChart.setOption({
        color: ["#0FCCD7", "#F57140", "#FBB307", "#B665B7", "#5488F1"],
        title: {
          text: this.titleText ? this.titleText : "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: function (params, ticket, callback) {                    //处理数据函数
            if(params.data.custom){                   
              return `${params.data.name}：${params.data.customValue}`
            }else{
              return `${params.data.name}：${params.data.value}`
            }
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["30%", "80%"],
            label: {
              normal: {
                position: "inner"
              }
            },
            data: this.optionData,
            itemStyle: {
              normal: {
                borderWidth: 0,
                borderColor: "#fff"
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0
                // shadowColor: "rgba(0, 0, 0, 0.8)"
              }
            }
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
</style>

在这里插入图片描述