Echarts 饼图基本用法

这篇具有很好参考价值的文章主要介绍了Echarts 饼图基本用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

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 饼图基本用法

官网上的代码如下。官网上每个图形的“配套”代码只展示了配置图形的对象。(对使用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)'
        }
      }
    }
  ]
};

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

Echarts 饼图基本用法

<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}文章来源地址https://www.toymoban.com/news/detail-420417.html

到了这里,关于Echarts 饼图基本用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • echarts实现3D饼图

    echarts是一款强大的数据可视化工具,它可以帮助我们快速、简单地创建各种图表。 要在echarts中实现3D饼图,需要使用echarts的 series 系列中的 pie3D 组件。 下面是一个简单的例子,展示如何使用echarts创建3D饼图: 上面的代码中,我们使用了 pie3D 组件,并设置了半径范围为 [\\\'

    2024年02月16日
    浏览(43)
  • echarts 实现3D饼图

    2023.6.30今天我学习了如何使用echarts渲染一个3d的饼图,效果如下: 相关代码如下:

    2024年02月17日
    浏览(48)
  • ECharts 饼图颜色设置教程 - 3 种方式设置饼图颜色

    方法一:在  series  内配置饼状图颜色 方法二:在  option  内配置饼状图颜色 方法三:在  data  内配置饼状图颜色 方法四:配置 ECharts 饼状图 随机颜色 Charts 饼状图中的每个扇形颜色其实都可以自定义或者随机显示颜色。 本文讲解 4 种配置修改 ECharts 饼图颜色的方法。

    2024年02月11日
    浏览(40)
  • echarts-3D立体饼图(1)

    先看效果图 1、echarts的版本使用的是: script src=\\\"https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js\\\"/script script src=\\\"https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.8/echarts-gl.js\\\"/script 2、饼图可自旋转,鼠标移上也可转动,不想让旋转grid3D:{viewControl:{autoRotate:false}} 3、 3D饼图主义echarts的

    2024年02月09日
    浏览(34)
  • 基于echarts开发的3D饼图

    可以自动旋转,鼠标高亮选中 第一步 echarts-gl 装包 我用的是上面两个版本,最开始因为echarts-gl 和echarts 版本不对应,报错找了半天,大坑,所以一定要下载对应的版本,建议直接复制到项目中package.json文件中,然后npm i 自动装包就行了 第二步 封装成了一个插件,可以直接复制到自己项

    2024年02月11日
    浏览(43)
  • 【Echarts】Echarts饼图样式-添加内圈阴影达到立体效果

    实现思想: 最终效果: 1.在series中添加内圈饼图 2.保持内圈高亮,达到阴影效果 完整script代码:

    2024年01月23日
    浏览(43)
  • Vue2 Echarts 3D饼图

    2024年01月19日
    浏览(44)
  • echarts如何实现3D饼图(环形图)?

    一、实现的效果 二、具体步骤 1.安装依赖 npm install echarts  2.引入echarts import * as echarts from \\\'echarts\\\';  注意:这里需要用到echarts-gl,必须单独引入才可以 import \\\'echarts-gl\\\'; 3.echarts部分代码 我知道这部分内容很多,但只要cv去用就可以了, getParametricEquation 这个函数不用改(我也不

    2024年03月28日
    浏览(81)
  • echarts3d饼图

    效果图: 安装echarts 在package.json文件中添加 如图 main.js中引入 完整代码如下(示例): HTML代码 js脚本代码 css样式代码 如有疑问欢迎留言

    2024年02月12日
    浏览(48)
  • echarts地图的常见用法:基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图

    最近几天用echarts做中国地图,就把以前写的demo:在vue中实现中国地图 拿来用,结果到项目里直接报错了,后来发现是因为版本的问题,没办法只能从头进行踩坑了。以下内容基于 vue3 和 echarts 5.32 常用的功能应该就这些,已经非常全了,创作不易,觉得不错就点个赞。 获取

    2023年04月15日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包