【JavaScript】用echarts绘制饼图

创始人

2024-03-20 17:18:20

🙋‍ 哈喽大家好，本次是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是偏移量。