🙋 哈喽大家好，本次是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>
总结
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~
