Vue+Echarts: 实现饼状图的详细教程

1、安装 ECharts 首先，你需要在项目中安装 ECharts。你可以通过在终端中运行以下命令来安装 ECharts

npm install echarts --save

2、创建一个 ECharts 实例 在 Vue 组件中，你可以通过引入 ECharts 库，然后在组件中使用 echarts.init() 方法来创建一个 ECharts 实例。这个实例将被用来配置和渲染图表。

import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null,
      chartData: {
        // 这里是你要绘制的饼图数据
      }
    }
  },
  mounted() {
    // 创建一个 ECharts 实例
    this.chart = echarts.init(this.$refs.chart)
    // 在 ECharts 实例中配置图表
    this.chart.setOption(this.getOption())
  },
  methods: {
    getOption() {
      return {
        // 这里是你的 ECharts 配置项
      }
    }
  }
}

3、配置 ECharts 在 getOption 方法中，你可以为饼图配置 ECharts 配置项。例如，你可以设置饼图的颜色、大小、数据等。

methods: {
    getOption() {
      return {
        title: {
          text: '饼图标题',
          subtext: '饼图副标题',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/&gt;{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['数据1', '数据2', '数据3', '数据4', '数据5']
        },
        series: [
          {
            name: '饼图名称',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 335, name: '数据1'},
              {value: 310, name: '数据2'},
              {value: 234, name: '数据3'},
              {value: 135, name: '数据4'},
              {value: 1548, name: '数据5'}
            ]
          }
        ]
      }
    }
  }

4. 在模板中绘制饼图 最后，在 Vue 组件的模板中，你需要添加一个用来呈现饼图的 div 元素，并通过 ref 属性引用它。然后，你可以在模板中使用这个 ref 来调用 ECharts 实例。

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

5、写法有很多种，附上我的写法

<template>
  <div>
    <div class="content-inner chart-style" ref="chart"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "echartsTool",
  props: {
    charData: {
      type: Object
    },
    charTitle: {
      type: String
    }
  },
  data() {
    return {
      chart: null,
      pieData: []
    };
  },
  watch: {
    charData: {
      handler() {
        this.renderChart();
      },
      deep: true
    }
  },
  mounted() {
    // 在组件mounted时绑定resize事件，当窗口大小发生变化时自动调整图表大小
    window.addEventListener("resize", this.handleResize);
    // 创建Echarts实例并绘制饼状图
    this.creatCharts();
  },
  beforeDestroy() {
    // 在组件销毁前解绑resize事件
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    async creatCharts() {
      this.renderChart();
    },
    // 处理resize事件，调整图表大小
    handleResize() {
      if (this.chart) {
        // 调用Echarts实例的resize方法，重新绘制图表
        this.chart.resize();
      }
    },
    renderChart() {
      const chart = echarts.init(this.$refs.chart);
      let option;
      if (this.charData.length > 0) {
        option = {
          title: {
            text: this.charTitle,
            textStyle: {
              fontWeight: "normal",
              fontSize: 16
            },
            left: "center"
          },
          color: ["#6395F9", "#62DAAB", "#657798", "#F6C022", "#E96C5B", "#74CBED", "#9968BD", "#FF9D4E", "#299998"],
          tooltip: {
            trigger: "item",
            formatter: "{b}：{d}%"
          },
          series: [
            {
              type: "pie",
              radius: ["60%", "90%"],
              top: 6,
              bottom: 25,
              left: "center",
              textStyle: {
                color: "#999",
                fontSize: "12px"
              },
              itemWidth: 6,
              itemHeight: 6,
              label: {
                show: true,
                formatter: "{b}: {d}%"
              },
              data: this.charData
            }
          ]
        };
      } else {
        option = {
          title: {
            text: this.charTitle,
            textStyle: {
              fontWeight: "normal",
              fontSize: 16
            },
            left: "center"
          },
          tooltip: {
            trigger: "none"
          },
          color: ["#d3d3d3"],
          series: [
            {
              type: "pie",
              radius: ["60%", "90%"],
              left: "center",
              label: {
                show: true,
                formatter: "{b}"
              },
              data: [{ value: 1, name: "暂无数据" }]
            }
          ]
        };
      }

      chart.setOption(option);
      this.chart = chart;
    }
  }
};
</script>

大致效果

如果需要饼图自适应浏览器缩放比例的话，可以参考我的这篇文章 https://blog.csdn.net/qijing19991210/article/details/129379925

代码007普通

打赏 收藏 海报 链接