第3关Echarts 绘制饼图任务描述本关任务利用 Echarts 绘制一个饼图。相关知识为了完成本关任务你需要掌握1.利用 Echarts 绘制饼图2.如何添加特效。绘制饼图和绘制柱状图和折线图相比饼状图在option中无需设置x轴和y轴series设置如下type类型为pieseries: [{name: 实训数量,type: pie,data: [{name:Java,value:300},{name:Python,value:280},{name:Linux,value:386},{name:数据库,value:180},{name:HTML,value:210},{name:Web,value:50},]}]代码设置后效果如下饼图其他设置和每一部分百分比的显示上面画好了一个最基本的饼图但我们平常见到的饼图还会显示出每部分所占的百分比接下来我们一起设置并美化一下我们的饼图吧~补充设置seriesseries : [{name: 实训数量,type: pie,radius : 55%, //设置整个圆的大小center: [50%, 60%], //设置整个圆的位置data:[{value:335, name:Java},{value:310, name:Python},{value:234, name:Linux},{value:135, name:数据库},{value:1548, name:HTML},{value:158, name:Web}]}]设置提示框显示百分比tooltip : {trigger: item,formatter: {a} br/{b} : {c} ({d}%)},效果如下把鼠标放到该部分就会有提示框显示该部分的信息和所占百分比编程要求仿造实训中的例子在右侧编辑器补充代码绘制饼图效果如下图要求设置圆的大小为55%设置圆的位置为[40%, 50%]设置提示框显示圆的百分比其中实训数量分别为[300, 280, 386, 180, 210, 50]测试说明我会对你编写的代码进行测试开始你的任务吧祝你成功!DOCTYPE htmlhtmlheadmeta charsetutf-8titleECharts/title!-- 引入 echarts.simple.min.js --script srchttps://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js/script/headbody!-- 为ECharts准备一个具备大小宽高的Dom --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例!-- Begin 1 --var myChart echarts.init(document.getElementById(main));!-- End 1 --// 指定图表的配置项和数据!-- Begin 2 --var option {title: {text: Educoder 实训统计},tooltip : {trigger: item,formatter: {a} br/{b} : {c} ({d}%)},series : [{name: 实训数量,type: pie,radius : 55%, //设置整个圆的大小center: [40%, 50%], //设置整个圆的位置data:[{name:Java,value:300},{name:Python,value:280},{name:Linux,value:386},{name:数据库,value:180},{name:HTML,value:210},{name:Web,value:50}]}]};!-- End 2 --// 使用刚指定的配置项和数据显示图表。!-- Begin 3 --myChart.setOption(option);!-- End 3 --/script/body/html有任何问题都可以随时关注私信
