【JavaScript】用echarts绘制饼图

news2024/11/24 2:23:02

🙋‍ 哈喽大家好，本次是JavaScript专栏echarts板块第一期
⭐本期内容：用echarts绘制饼图
🏆系列专栏：JavaScript
👍一起学习，一起加油！

文章目录

前言
效果图
思路
- 准备一个dom
- 基于准备好的dom，初始化echarts实例
- 指定图表的配置项和数据(对象)
HTML
总结

前言

echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

效果图

在这里插入图片描述

思路

准备一个dom

先在body中设置一个div，设置id，宽度和高度

在这里插入图片描述

在头部引入echarts的js文件

在这里插入图片描述

在body中添加一个script标签，用于编写代码。

在这里插入图片描述

添加setOption将刚指定的配置项和数据显示图表。

在这里插入图片描述

基于准备好的dom，初始化echarts实例

使用init将准备好的dom进行初始化，也可以引入喜欢的主题，默认的有dark和light。找到合适的主题后，要在头部引用。

在这里插入图片描述

大家也可以在官网上找到自己喜欢的主题，下载即可，如果没有找到喜欢的，也可以自定义主题。
echarts官网地址：https://echarts.apache.org

在这里插入图片描述

指定图表的配置项和数据(对象)

设置数据，这里数据是数组的形式，一个对象包括了name和value两个属性，属性用键值对的方式进行设置。我这里的数据是各个省份疫情未新增天数
（数据是上个月的某一天，不一定真实，仅供实现效果，杠就是你对👀）

在这里插入图片描述

在option中指定图表的配置项和数据

在这里插入图片描述

设置标题的内容，位置居中，距离上边距50px。

在这里插入图片描述

toolbox是工具栏组件相关的行为，必须引入工具栏组件后才能使用。这里使用show显示工具栏，feature是各工具的配置项。

在这里插入图片描述

设置鼠标移动到相应色块的效果和图例的位置

在这里插入图片描述

设置系列配置项，设置图的类型、数据、标签等。
label为标签，用show显示标签，formatter为回调函数，返回标签显示的内容。
radius是院的内外半径，center是图的位置。
rosetype是圆心角的类型，area是每个部分圆心角不变，radius是圆心角会变化。
设置选中偏离原点一小段距离，selectedMode是类型，selectedOffset是偏移量。

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>饼图</title>
    <script src="./echarts.js"></script>
    <script src="./dark.js"></script>
  </head>
  <body>
    <div id="main" style="width: 1000px; height: 800px"></div>
    <script type="text/javascript">
      // 2.基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"), "dark");
      // 设置数据，对象，name和value属性
      var pieData = [
        {
          name: "北京",
          value: 1,
        },
        {
          name: "上海",
          value: 1,
        },
        {
          name: "黑龙江",
          value: 17,
        },
        {
          name: "吉林",
          value: 9,
        },
        {
          name: "辽宁",
          value: 9,
        },
        {
          name: "内蒙古",
          value: 22,
        },
        {
          name: "新疆",
          value: 23,
        },
        {
          name: "西藏",
          value: 42,
        },
        {
          name: "青海",
          value: 35,
        },
        {
          name: "四川",
          value: 7,
        },
        {
          name: "云南",
          value: 20,
        },
        {
          name: "陕西",
          value: 21,
        },
        {
          name: "重庆",
          value: 16,
        },
        {
          name: "贵州",
          value: 24,
        },
        {
          name: "广西",
          value: 16,
        },
        {
          name: "海南",
          value: 21,
        },
        {
          name: "澳门",
          value: 37,
        },
        {
          name: "湖南",
          value: 12,
        },
        {
          name: "江西",
          value: 13,
        },
        {
          name: "福建",
          value: 14,
        },
        {
          name: "安徽",
          value: 13,
        },
        {
          name: "浙江",
          value: 7,
        },
        {
          name: "江苏",
          value: 22,
        },
        {
          name: "宁夏",
          value: 8,
        },
        {
          name: "山西",
          value: 16,
        },
        {
          name: "河北",
          value: 13,
        },
        {
          name: "天津",
          value: 13,
        },
      ];

      // 3.指定图表的配置项和数据(对象)
      var option = {
        title: {
          text: "各省份疫情未新增天数",
          left: "center",
          right: "center",
          top: "50px",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "center",
          top: "bottom",
        },
        series: [
          {
            type: "pie",
            data: pieData,
            label: {
              //显示文字
              show: true,
              formatter: function (arg) {
                return arg.name + "未新增" + arg.value + "天";
              },
            },
            radius: [60, 300],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5,
            },
            // 选中偏离原点一小段距离
            selectedMode: "single",
            selectedOffset: "30", //偏移量
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>