EChars學習(繪製餅狀圖,南丁格爾圖)

阿新 • • 發佈：2019-01-02

心靈一語:

對於世界而言，你是一個人；但是對於某個人，你是他的整個世界
                                                    --《飄》

簡單直接上程式碼,一切盡在程式碼中<(￣ˇ￣)/

這是一個HTML文件

<!DOCTYPE html>
<!--輸出南丁格爾圖的程式碼-->
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js --> 

    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main' 
));

        // 指定圖表的配置項和資料
        var option = {
        <!--設定背景顏色-->
        backgroundColor: '#2c343c',//注意用逗號結尾

           series : [
        {
            name: '訪問來源',
            type: 'pie',      //設定輸出的影象型別
            radius: '70%',    //設定輸出半徑
            roseType: 'angle',//將輸出形式設定為南丁格爾圖,沒有這句將輸出餅狀圖
            //資料
            data:[
                {value:400, name:'搜尋引擎'},
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:274, name:'聯盟廣告'},
                {value:235, name:'視訊廣告'}
            ],
            //設定標籤屬性
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            //設定標籤線的樣式
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            //設定陰影
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
        };

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
     
</script>
</body>
</html>

EChars學習(繪製餅狀圖,南丁格爾圖)

心靈一語: 對於世界而言，你是一個人；但是對於某個人，你是他的整個世界 --《飄》簡單直

使用ECharts繪製南丁格爾圖

1、先畫餅圖，主要是通過扇形的弧度表現不同類目的資料在總和中的佔比。只有一維的數值，不需要給類目。因為不在直角座標系上，所以也不需要xAxis，yAxis。  <div id="main" style="w

Echarts個性化圖表的樣式--繪制南丁格爾圖

rip angle 設置 radi 範圍 query orm 個性化 ech <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

5.2.5 厄爾•南丁格爾

看看偉大的羅馬帝國國王馬克•蘇里拉爾怎麼說的，他說：“一個人的生活，就像他所設想的那樣”。英國政治家迪斯勒比說：“一個人要獲得成功，需要一個等待的過程。”愛墨生說：“一個人整天想著什麼，他就會成為什麼人。”威廉•詹姆斯說：“我這一代人最偉大的發現是，人類只要改變態度，就能改變人生。”他也說：“如果你足夠在意結

canvas繪製餅狀圖

話不多說直接上程式碼 <canvas width="600" height="400"></canvas> <script> var PieChart = function (ctx) { /*繪製工具

QChartView繪製餅狀圖

效果圖： #include "mainwindow.h" #include "form.h" #include <QApplication> #include <QtCharts> #include <QPieSerie

自定義View繪製餅狀圖和環狀圖

最近工作中遇到一個需求，就是將不同年齡段資料以餅狀圖或者環狀圖的形式展示出來。於是利用android自定義的知識封裝一個自定義View,方便日後使用，特此記錄。效果圖如下 1.餅狀圖 1.環狀圖主要強調以下3部分 1.value中新增attr

iOS使用Charts框架繪製—餅狀圖

首先先看一下效果: 餅狀圖一、建立餅狀圖物件建立餅狀圖物件用到類是PieChartView.h, 程式碼如下: self.pieChartView = [[PieChartView alloc] init]; self.pieChartView.backgroundC

Canvas(3)---繪製餅狀圖

Canvas(3)---繪製餅狀圖有關canvas之前有寫過兩篇文章 1、Canvas(1)---概述+簡單示例 2、Canvas(2)---繪製折線圖在繪製餅狀圖之前，我們先要理解什麼是圓弧,如何在畫布中繪製文字等等。所以這裡將繪製餅狀圖理解拆分成以下幾個步驟： 1、理解圓弧 2、繪製一段圓弧 3、繪

echarts繪製巢狀環形圖/ 雙餅圖

裝置型別在裡裝置品牌在外後臺返回資料如下格式： device_brand_distribution = [{'equipment_type': '智慧手機', 'equipment_brand': 'xiaomi',

繪製matplotlib 餅狀圖

參考：https://blog.csdn.net/ScarlettYellow/article/details/80458797 （2）2016年就業人員在三次產業中分佈的餅狀圖。 def

用g.raphael.js高速繪製餅圖、柱狀圖、點狀圖、折線圖（下）

首先，這裡有個g.raphael.js的範例文章，可以直接看，我就不轉載了：好了，接下來我們來試試建立柱狀圖： <script type="text/javascript" src="raphael.js"></script> <scr

使用MPAndroidChart繪製多條折線圖和餅狀圖部分問題備錄

餅狀圖餅狀圖基本使用 /** * 繪製PieChart(餅圖) * * @param entries */ private void drawPieChart(ArrayList<PieEntry> entries

canvas——餅狀圖繪製文字

重點：計算文字應放的位置座標。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>餅狀圖繪製文字</tit

基於SpringMVC框架使用ECharts3.0實現折線圖，柱狀圖，餅狀圖,的繪製

頁面部分：<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

使用css3制作正方形、三角形、扇形和餅狀圖

radi spa over pointer tran ima 得到 lin 引入 1.利用邊框制作正方形如果將盒容器的width和height設置為0，並為每條邊設置一個較粗的width值和彼此不同的顏色，最終會得到四個被拼接在一起三角形，它們分別指向不同的顏色。 htm

JavaScript+svg繪制的一個餅狀圖

圖例 n) attribute 數字類型 XML 用戶 h+ htm type svg參考：https://www.w3.org/TR/SVG/<body onload=‘document.body.appendChild( pieChart([12,23,34

PHP畫矩形，橢圓，圓，畫橢圓弧，餅狀圖

tro lips ade inpu 統計起點 com eth func 1：畫矩形： imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $col ) imagere

柱形圖，餅狀圖JavaScript

column 註意文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({

java代碼實現highchart與數據庫數據結合完整案例分析（一）---餅狀圖

隱藏 des log cred 數據庫數據 idt string 時間 input 作者原創：轉載請註明出處在做項目的過程中，經常會用到統計數據，同時會用到highchart或echart進行數據展示，highchart是外國開發的數據統計圖插件， echa

EChars學習(繪製餅狀圖,南丁格爾圖)

相關推薦