vue——echarts 饼图中心默认展示总值

最新推荐文章于 2024-07-04 09:26:30 发布

原创最新推荐文章于 2024-07-04 09:26:30 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts #前端

这篇博客展示了如何利用ECharts库创建一个显示不同操作系统（如Windows, MacOSX, Android）分布情况的饼图。通过JavaScript代码实现图表的初始化、动态调整以及鼠标悬停时的提示信息显示。此外，还提供了数据更新的方法来刷新图表。

在这里插入图片描述

<span style="font-weight:600">操作系统</span>
<div
  class="echart"
  id="system-echart"
  :style="{ float: 'left', width: '100%', height: '300px' }"
></div>

<script>
import * as echarts from "echarts";
import { pieEchart } from "../util/pieechart";
export default {
  name: "PieEchart",
  props: ["breakdownData"],
  data() {
    return {
      systemName: "操作系统",
      os_types: [
	    {
	        "name": "Windows",
	        "value": 17
	    },
	    {
	        "name": "Mac OS X",
	        "value": 3
	    },
	    {
	        "name": "Android",
	        "value": 1
	    }
      ]
    };
  },
  methods: {
    refreshpies() {
      let system_echart = document.getElementById("system-echart");
      this.renderInitEchart(system_echart, this.systemName, this.os_types);
    },
    renderInitEchart(id, name, pieData) {
      let total = 0;
      if (pieData.length > 0) {
        for (let item of pieData) {
          total += item.value;
        }
      }

      let getchart = echarts.init(id);
      let option = pieEchart(name, pieData, total);
      getchart.setOption(option);

      getchart.on("mouseover", function() {
        getchart.setOption({
          title: {
            text: ""
          }
        });
      });

      getchart.on("mouseout", function() {
        getchart.setOption({
          title: {
            text: ["{value|" + total + "}"]
          }
        });
      });

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    }
  }
};
</script>

util/pieechart.js

function pieEchart(name, data, total) {
  let option = {
    title: {
      text: [`{value|${total > 0 ? total : "无数据"}}`],
      top: "center",
      left: "24%",
      textAlign: "center",
      textStyle: {
        rich: {
          value: {
            fontSize: 30,
            fontWeight: "600"
          }
        }
      }
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      left: "50%",
      top: 26,
      icon: "rect",
      itemHeight: 26,
      itemWidth: 8,
      selectedMode: false,
      textStyle: {
        rich: {
          name: {
            fontSize: 12,
            color: "#011",
            padding: [4, 0, 0, 0]
          },
          num: {
            fontSize: 14,
            fontWeight: 600,
            padding: [4, 0, 0, 0],
            color: "#000"
          }
        }
      },
      formatter: function(name) {
        let tarValue;
        if (data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (data[i].name == name) {
              tarValue = data[i].value;
            }
          }
        }

        return [`{name|${name}}`, `{num|${tarValue || "无数据"}}`].join("\n");
      }
    },
    series: [
      {
        name,
        center: ["24%", "50%"],
        type: "pie",
        radius: ["50%", "74%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
          formatter: "{c}",
          fontSize: "30",
          fontWeight: "600"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "30",
            fontWeight: "600"
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  };

  return option;
}

export { pieEchart };