草庐IT

Echarts 饼图基本用法

我想当话家 2023-04-22 原文

目录

Echarts 饼图基本用法

引入Echarts

创建饼图

拓展

引入Echarts

所介绍的两种方法，适用于使用Echarts的每种图。

在一般的html里引入Echarts，需要下载echarts.js文件。在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。再到html文件中引入该文件，如下所示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

在使用了vue框架的项目中引入Echarts。

直接使用命令安装Echarts资源包。（要连网时才能正常安装）

npm install echarts --save

创建饼图

从官网找到适合自己项目的图形。下图是我选择的图形

官网上的代码如下。官网上每个图形的“配套”代码只展示了配置图形的对象。（对使用Echarts的新手不太友好）当需要自定义图形的一些细节时，就需要修改一些内容。

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

下面展示我项目中最终饼图的样子，并对饼图的一些配置进行说明。

<template>
  <div class="pie-container">
    <div class="pie" ref="pieBox" style="height: 100%"></div>
    <!-- <div class="colors"></div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
// import { debounce } from "@/util/debounce.js";
export default {
  mounted() {
    this.initPieData();
    window.addEventListener("resize", this.reload); //监听浏览器视口变化，并重绘图形
  },
  destroyed() {
    window.removeEventListener("resize", this.reload);
  },
  data() {
    return {
      //接口返回的数据格式
      echartsData: {
        pieArr: [
          {
            color: "#cc80cc",
            name: "儿童读物",
            value: 0,
            code: "3",
            softFiled: 1,
          },
          {
            color: "#8BA1AE",
            name: "言情小说",
            value: 0,
            code: "1",
            softFiled: 1,
          },
          {
            color: "#99aa00",
            name: "热门推荐",
            value: 1,
            code: "0",
            softFiled: 3,
          },
          {
            color: "#00aaff",
            name: "悬疑",
            value: 1,
            code: "6",
            softFiled: 5,
          },
          {
            color: "#33aa33",
            name: "教辅资料",
            value: 1,
            code: "7",
            softFiled: 7,
          },
          {
            color: "#66d5ff",
            name: "名著",
            value: 5,
            code: "00",
            softFiled: 11,
          },
          {
            color: "#f0dcfc",
            name: "工科学习资料",
            value: 1,
            code: "11",
            softFiled: 11,
          },
          {
            color: "#968FD3",
            name: "书画集",
            value: 0,
            code: "30",
            softFiled: 11,
          },
        ],
        headMsg: {
          totalNum: 9,
          onDuty: 5,
          firstDeptName: "名著占比",
          offDuty: 4,
          dutyPercent: "0.55555556",
        },
        msg: "success",
      },
      pieChart: null,
    };
  },
  methods: {
    // 重新刷新界面的功能
    // reload: debounce(function () {
    //   this.disposeCharts();
    //   this.initPieData();
    //   // location.reload();
    // }, 300),

    /**
     * 销毁饼图
     */
    disposeCharts() {
      echarts.dispose(this.pieChart);
    },
    //得到饼图的数据格式（Echarts规定的格式） { value: 12, name: '在线', itemStyle: { color: '#005eff' } },
    getPieData(pieArr) {
      const pieData = pieArr.map((item) => {
        return {
          value: `${item.value}`,
          name: `${item.name}：${item.value}本`, //name 为每一项的标题，影响鼠标浮动和图例
          itemStyle: { color: `${item.color}` },
        };
      });
      return pieData;
    },
    //如果需要修改图例，可以得到图例的数据格式，在放到配置项中
    // getLegendData(Arr) {
    //   const legendData = Arr.map((item) => {
    //     return {
    //       name: `${item.name}  ${item.value}本`,
    //       icon: "circle",
    //     };
    //   });
    //   return legendData;
    // },

    //初始化饼图
    initPieData() {
      this.pieChart = echarts.init(this.$refs.pieBox); //选中dom
      const dutyPercent =
        ((+this.echartsData.headMsg.dutyPercent).toFixed(4) * 100).toFixed(2) +
        "%"; //因为js本身的精度问题所以乘了一百之后又保留了两位小数 也可以用bigInt解决
      let onDutyNum = this.echartsData.headMsg.onDuty;
      let totalNum = this.echartsData.headMsg.totalNum;
      let pieData = this.getPieData(this.echartsData.pieArr); //获取饼图的数据格式
      let option = {
        backgroundColor: "#fff", //设置饼图的画布的背景色
        //修改标题
        title: {
          top: 10, //类似于定位中的top
          text: "名著占总售书籍的比例",
          subtext: `总售书：${totalNum}本    名著:（${onDutyNum}本，${dutyPercent}）`, //f副标题
          left: "center",
          itemGap: 12, //主标题与副标题的间隙
          textStyle: {
            fontSize: 28,
          },
          subtextStyle: {
            fontSize: 16,
          },
        },
        //修改鼠标悬浮到饼图上的文字
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}（{d}%）",
        },
        // 调整图例位置
        legend: {
          top: 360,
          orient: "vertical",
          x: "center",
          y: "bottom",
          width: "100",
          padding: [0, 0, 5, 0], //上右下左
          itemWidth: 15,
          icon: "circle",
          itemGap: 20,
          textStyle: {
            //图例字体样式
            fontSize: 16,
            fontFamily: "微软雅黑",
          },
        },
        series: [
          {
            top: "-40%",
            name: "名著占总售书籍的比例",
            type: "pie",
            radius: "60%",
            avoidLabelOverlap: false,
            data: pieData,
            center: ["50%", "50%"],
            //饼图上的指示线
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            //鼠标移动上去后饼图区域的样式改变
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      //生成饼图
      this.pieChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.pie-container {
  border: 1px #ccc solid;
  height: 700px;
  width: 400px;
  margin-left: 30px;
}
</style>

拓展

关于鼠标悬浮到饼图上的提示字样修改。可以学习这个博客

echarts a,b,c,d 分别表示跟用法_wu_223的博客-CSDN博客_echarts {b}

用法Echarts34name前端javascript

有关Echarts 饼图基本用法的更多相关文章

  1. Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2

    ?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？ 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

  4. ruby-on-rails - Rails 基本 Base64 身份验证 - 2

    我正在尝试复制此GETcurl请求:curl-D--XGET-H"Authorization:BasicdGVzdEB0YXByZXNlYXJjaC5jb206NGMzMTg2Mjg4YWUyM2ZkOTY2MWNiNWRmY2NlMTkzMGU="-H"Content-Type:application/json"http://staging.example.com/api/v1/campaigns在Ruby中，通过电子邮件+apikey生成身份验证:auth="Basic"+Base64::encode64("test@example.com:4c3186288ae23fd9661c

  5. ruby - 有人可以解释一下在 Ruby 中注入(inject)的真实、通俗易懂的用法吗？ - 2

    我正在学习Ruby，遇到了inject。我正处于理解它的风口浪尖，但当我是那种需要真实世界的例子来学习一些东西的人时。我遇到的最常见的例子是人们使用inject来添加一个(1..10)范围的总和，我不太关心这个。这是一个任意的例子。在实际程序中我会用它做什么？我正在学习，所以我可以继续使用Rails，但我不必有一个以Web为中心的示例。我只需要一些我可以全神贯注的目标。谢谢大家。 最佳答案 inject有时可以通过它的“其他”名称reduce更好地理解。它是一个对Enumerable进行操作(迭代一次)并返回单个值的函数。它有许多有

  6. ruby - 使用法拉第上传文件 - 2

    我在尝试使用Faraday将文件上传到网络服务时遇到问题。我的代码:conn=Faraday.new('http://myapi')do|f|f.request:multipartendpayload={:file=>Faraday::UploadIO.new('...','image/jpeg')}conn.post('/',payload)尝试发布后似乎没有任何反应。当我检查响应时this是我所看到的:#:post,:body=>#,#,@opts={}>,#],@index=0>>,#>],@ios=[#,#,@opts={}>,#],@index=0>,#],@index=0>

  7. ruby - rspec: raise_error 用法来匹配错误信息 - 2

    我使用raise(ConfigurationError.new(msg))引发错误我试着用rspec测试一下:expect{Base.configuration.username}.toraise_error(ConfigurationError,message)但这行不通。我该如何测试呢？目标是匹配message。 最佳答案 您可以使用正则表达式匹配错误消息:it{expect{Foo.bar}.toraise_error(NoMethodError,/private/)}这将检查NoMethodError是否由privateme

  8. Simulink方法总结和避坑指南（一）——Simulink入门与基本调试方法 - 2

    文章目录一、项目场景二、基本模块原理与调试方法分析——信源部分：三、信号处理部分和显示部分：四、基本的通信链路搭建：四、特殊模块：interpretedMATLABfunction：五、总结和坑点提醒一、项目场景  最近一个任务是使用simulink搭建一个MIMO串扰消除的链路，并用实际收到的数据进行测试，在搭建的过程中也遇到了不少的问题（当然这比vivado里面的debug好不知道多少倍）。准备趁着这个机会，先以一个很基本的通信链路对simulink基础和相关的debug方法进行总结。  在本篇中，主要记录simulink的基本原理和基本的SISO通信传输链路（QPSK方式），计划在下篇记

  9. 【ChatGPT】ChatGPT 的 N 种用法 - 2

    目录ChatGPT简介技术原理应用未来发展ChatGPT的10 种用法ChatGPT简介ChatGPT是一种基于深度学习的大型语言模型，由OpenAI公司开发。技术原理GPT是GenerativePre-trainedTransformer的缩写，意为生成式预训练变压器。它的技术原理是使用了一个基于注意力机制的变压器（Trans

  10. ruby - 是否有 Rack::Session::Cookie 用法的基本示例？ - 2

    我找不到任何使用Rack::Session::Cookie的简单示例，并且希望能够将信息存储在cookie中，并在以后的请求中访问它并让它过期.这些是我能找到的唯一示例:HowdoIset/getsessionvarsinaRackapp?http://rack.rubyforge.org/doc/classes/Rack/Session/Cookie.html这是我得到的:useRack::Session::Cookie,:key=>'rack.session',:domain=>'foo.com',:path=>'/',:expire_after=>2592000,:secret=

随机推荐