• 【JavaScript】用echarts绘制饼图

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

    文章目录

    前言

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181

    总结

    以上就是今天的学习内容啦~
    如果有兴趣的话可以订阅专栏，持续更新呢~
    咱们下期再见~
    在这里插入图片描述

  • 相关阅读:
    智慧公厕是什么？智慧公厕对智慧城市的意义
    ARM体系结构与汇编语言
    Linux 简单命令
    嵌入式开发，如何防止设备被抄袭？
    Java面试题练习第一套（包含参考答案）
    Winform控件绑定数据
    Go-知识map
    理解位运算，左移、右移、与、或、非
    Linux安装mysql
    在javascript中的公共、私有和受保护的类可见性模式
  • 原文地址：https://blog.csdn.net/m0_55394328/article/details/128157596