ECharts 學習筆記02, 餅圖與南丁格爾圖

張遷發布于2019-08-23 16:18 / 2919人閱讀

摘要：目標使用繪制餅狀圖并在此基礎上繪制南丁格爾餅圖示例如下搭建環境新建文件夾目錄結構如下編寫我們在中放入和分別用于顯示餅狀圖和南丁格爾圖編寫文件為了使和并列我們需要加上樣式編寫文件餅狀圖需要設置。

目標

使用 echarts 繪制餅狀圖, 并在此基礎上繪制南丁格爾餅圖, 示例如下

搭建環境

新建文件夾 note02, 目錄結構如下

./note02/
 |---index.html
 |---index.js
 |---index.css
 |---echarts.js

編寫 index.html

我們在

中放入

和

, 分別用于顯示餅狀圖和南丁格爾圖




    
    echarts note01

編寫 css 文件

為了使 article 和 aside 并列, 我們需要加上 float 樣式

main{
    width: 800px;
    height: 400px;
}

main > article{
    width: 50%;
    height: 100%;
    float: left;
}

main > aside{
    width: 50%;
    height: 100%;
    float: right;
}

編寫 js 文件

餅狀圖, 需要設置 option.series[0].type = "pie"。而南丁格爾圖, 則需要在餅狀圖的基礎上, 增加 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);

小結

以上就是使用 EChart 繪制餅圖和南丁格爾圖的例子。休息一下，馬上開始下一次學習~

云服務器 GPU云服務器 html5餅圖代碼學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102884.html

每周前端開源推薦第六期

摘要：每周前端開源推薦第六期從名字就可以很容易的看出該項目的作用，解壓縮。同時支持瀏覽器和。是任務調度的項目。初始化定義人物每三分鐘觸發一次觸發一個交互式學習的方式。強烈建議大家先去體驗一下的介紹是由百度團隊開發的一款開源圖表項目。每周前端開源推薦第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...

Salamander 2019-08-28 17:53 評論0 收藏0
每周前端開源推薦第六期

摘要：每周前端開源推薦第六期從名字就可以很容易的看出該項目的作用，解壓縮。同時支持瀏覽器和。是任務調度的項目。初始化定義人物每三分鐘觸發一次觸發一個交互式學習的方式。強烈建議大家先去體驗一下的介紹是由百度團隊開發的一款開源圖表項目。每周前端開源推薦第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...

channg 2019-08-19 14:23 評論0 收藏0