資訊專欄INFORMATION COLUMN
摘要：目標(biāo)使用繪制餅狀圖并在此基礎(chǔ)上繪制南丁格爾餅圖示例如下搭建環(huán)境新建文件夾目錄結(jié)構(gòu)如下編寫我們在中放入和分別用于顯示餅狀圖和南丁格爾圖編寫文件為了使和并列我們需要加上樣式編寫文件餅狀圖需要設(shè)置。
目標(biāo)
使用 echarts 繪制餅狀圖, 并在此基礎(chǔ)上繪制南丁格爾餅圖, 示例如下
新建文件夾 note02, 目錄結(jié)構(gòu)如下
./note02/ |---index.html |---index.js |---index.css |---echarts.js
我們在 中放入 和 , 分別用于顯示餅狀圖和南丁格爾圖
echarts note01
為了使 article 和 aside 并列, 我們需要加上 float 樣式
main{
width: 800px;
height: 400px;
}
main > article{
width: 50%;
height: 100%;
float: left;
}
main > aside{
width: 50%;
height: 100%;
float: right;
}
餅狀圖, 需要設(shè)置 option.series[0].type = "pie"。而南丁格爾圖, 則需要在餅狀圖的基礎(chǔ)上, 增加 roseType: "angle" 屬性
"use strict";
// 餅狀圖
var myPie = echarts.init(document.getElementsByTagName("article")[0]);
var option = {
title:{
text: "餅狀圖"
},
series:[{
name: "訪問來源",
type: "pie",
// 半徑radius 是 min(width, heigh) 的 60%
radius: "60%",
// 也可以直接輸入像素絕對值
data: [
{value: 11, name: "video"},
{value: 12, name: "audio"},
{value: 13, name: "mail"},
{value: 14, name: "website"},
{value: 15, name: "app"},
]
}],
};
myPie.setOption(option);
// 南丁格爾圖
var myRosePie = echarts.init(document.getElementsByTagName("aside")[0]);
option.title.text = "南丁格爾圖";
option.series[0].roseType = "angle";
option.series[0].radius = "75%";
myRosePie.setOption(option);
小結(jié)
以上就是使用 EChart 繪制餅圖和南丁格爾圖的例子。休息一下，馬上開始下一次學(xué)習(xí)~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102884.html
摘要：每周前端開源推薦第六期從名字就可以很容易的看出該項(xiàng)目的作用，解壓縮。同時(shí)支持瀏覽器和。是任務(wù)調(diào)度的項(xiàng)目。初始化定義人物每三分鐘觸發(fā)一次觸發(fā)一個(gè)交互式學(xué)習(xí)的方式。強(qiáng)烈建議大家先去體驗(yàn)一下的介紹是由百度團(tuán)隊(duì)開發(fā)的一款開源圖表項(xiàng)目。 每周前端開源推薦第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...
摘要：每周前端開源推薦第六期從名字就可以很容易的看出該項(xiàng)目的作用，解壓縮。同時(shí)支持瀏覽器和。是任務(wù)調(diào)度的項(xiàng)目。初始化定義人物每三分鐘觸發(fā)一次觸發(fā)一個(gè)交互式學(xué)習(xí)的方式。強(qiáng)烈建議大家先去體驗(yàn)一下的介紹是由百度團(tuán)隊(duì)開發(fā)的一款開源圖表項(xiàng)目。 每周前端開源推薦第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...
閱讀 2906·2021-11-24 09:38
閱讀 3522·2021-11-23 09:51
閱讀 993·2021-09-09 11:52
閱讀 4043·2021-08-11 11:18
閱讀 1119·2019-08-30 14:05
閱讀 3237·2019-08-30 11:23
閱讀 1775·2019-08-29 17:02
閱讀 1135·2019-08-26 13:49
