echarts饼图

最新推荐文章于 2025-02-19 11:13:42 发布

Jaime_0719

最新推荐文章于 2025-02-19 11:13:42 发布

阅读量189

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Jaime_0719/article/details/120878772

版权

本文详细介绍了如何使用Echarts JavaScript库来创建饼图，包括配置项设置、数据加载和交互功能的实现，帮助前端开发者更好地理解和应用Echarts进行数据可视化。

摘要由CSDN通过智能技术生成

<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
const echarts = require("echarts");
export default {
  name: "",
  data() {
    return {
      charts: "",
      opinion: ["0-20%", "20-40%", "40-60%", "60-80%", "80-100%"],
      opinionData: [
        {
          value: 10,
          name: "0-20%",
          ipPorts: ["100.200.0.1", "100.200.0.2", "100.200.0.3"]
        },
        {
          value: 30,
          name: "20-40%",
          ipPorts: ["100.200.0.4", "100.200.0.5", "100.200.0.6"]
        },
        {
          value: 30,
          name: "40-60%",
          ipPorts: ["100.200.0.1", "100.200.0.2", "100.200.0.3"]
        },
        {
          value: