EChart創建圓形空心圈餅圖

原創 躁动的蜗牛 2019-05-01 00:50

原文地址：http://www.hxstrive.com/article/620.htm

關於EChart的使用就不再贅述，直接上代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ECharts3 學習</title>

    <script src="../../public/js/echarts3/echarts.js"></script>

</head>

<body>

 

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({

        tooltip: {

            trigger: 'item',

            formatter: "{a} <br/>{b}: {c} ({d}%)"

        },

        legend: {

            orient: 'vertical',

            x: 'left',

            data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']

        },

        series: [

            {

                name:'訪問來源',

                type:'pie',

                radius: ['50%', '70%'],

                avoidLabelOverlap: false,

                label: {

                    normal: {

                        show: false,

                        position: 'center'

                    },

                    emphasis: {

                        show: true,

                        textStyle: {

                            fontSize: '30',

                            fontWeight: 'bold'

                        }

                    }

                },

                labelLine: {

                    normal: {

                        show: true

                    }

                },

                data:[

                    {value:335, name:'直接訪問'},

                    {value:310, name:'郵件營銷'},

                    {value:234, name:'聯盟廣告'},

                    {value:135, name:'視頻廣告'},

                    {value:1548, name:'搜索引擎'}

                ]

            }

        ]

    });

</script>

 

</body>

</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

echarts環形圖修改高亮部分的凸起高度

app.title = '環形圖'; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)"

blueBings 2020-07-08 07:33:48

Echarts實戰案例代碼(6)：不設區的地級市行政區劃3D工作進度五色圖

不設區的市，即不設立市轄區的市。廣東省中山市、東莞市，甘肅省嘉峪關市，海南省儋州市、就是沒有設立市轄區的地級市，這部分地級市下轄行政區建制爲鄉級行政區，也爲“不設區的市”。 一、Echarts核心庫的外部調用引入；

漏刻有时 2020-07-08 05:07:44

echarts 橫向柱形圖的使用

echarts 橫向柱形圖的使用 歡迎使用Markdown編輯器 遇到了一個需求，實現橫向的柱形圖，並在左上角顯示對應的名稱【第一次用echarts，不太熟悉用法】 要解決以下幾個問題 柱形圖展示爲橫向 隱藏掉X軸Y軸的數據顯

肥小季 2020-07-08 07:05:25

echarts學習筆記(3) -- 爲圖表添加主題

echarts 爲圖表提供了多種主題，在其官網上就提供了 infographic，macarons, shine, dark, blue, green, red, grey, default 九種主題的選擇，除此之外，echarts 還有

santongwater 2020-07-08 05:50:35

2017_12_05 echarts動態賦值問題，tab切換時，圖表顯示錯亂

當一張echarts圖表中有多個選項切換時，在向option中setOption中的時候，要保證，這時候的option中並沒有任何數據，否則，會將兩次數據合併，就會導致數據錯亂問題，官網上有個解決方法，是setOption時，可以設置三個

liujiaxin_lei 2020-07-07 21:44:35

echarts中國及世界經緯度座標

轉載於 https://blog.csdn.net/weixin_30323961/article/details/100092434   中國座標 export default { 阿克蘇地區: [80.260604, 41.

雨中散步撒哈拉 2020-07-07 15:14:21

python爬蟲實戰--第二章：電影數據處理與可視化

本實戰項目通過python爬取豆瓣電影Top250榜單，利用flask框架和Echarts圖表分析評分、上映年份並將結果可視化,並製作了詞雲，項目已經上傳至服務器，歡迎各位大佬批評指正。 項目展示：http://121.36.81

程序猿小泽 2020-07-07 11:27:51

vue echarts v-charts動態添加數據 動態設置options - aftersetoption

需求是：一開始只有三組數據，然後隨着下拉框動態選擇指標，最多選擇兩個。然後動態加載到圖表中； 用的是基於echarts的v-charts；此時的需求就是要動態設置比如 legend，title或者是tooltips等等； 難道加一個re

ws_code_csdn 2020-07-07 08:45:20

echarts設置時間軸timeline的長度

使用timeline的：left,right屬性，設置時間軸距離左邊和右邊的距離即可

小木子。。。 2020-07-06 23:59:45

ssh下echarts折線和柱狀圖

頁面 引入所需要的js包  <script type="text/javascript" src="../js/echarts.js"></script>         <script type="text/javascript" sr

Prince灬 2020-07-06 23:07:23

echarts中部分功能實現

1.vue中echarts渲染的速度很慢，建議在加載的過程中加入loading加載。 2.給echarts添加標記線（如平均線）、標記點（如最大值、最小值） series: [ { data:

尔嵘 2020-07-06 21:27:59

ECharts折線圖實例

因工作需要, 需求是線段的顏色變化,然後在網上找了很多實例, 文檔中也看了很多的配置屬性, 都沒有找到可以滿足自己要求的 ( 一般實例都是整體的一條線, 並沒有配置兩點之間來設置線的屬性 ), 所以只能自己搗鼓了 但是有個需求依

Nicis丶 2020-07-06 18:32:55

數據可視化----Echarts的基本使用和基本配置詳情

該教程來自 黑馬程序員的 pink老師的 數據可視化教程 ECharts數據可視化項目-大屏數據可視化展示-echarts 圖表製作-pink老師直播課更新完畢 一、數據可視化相關庫介紹 D3.js 目前 Web 端評價最高

独坐空山后 2020-07-06 18:06:05

Echarts柱狀圖和折線圖結合

因功能需要，需要體現業務辦理量及環比，故通過echarts的柱狀圖和折線圖結合共同達到該效果； ①柱狀圖因區域數量不確定，爲保證查看的效果，使用dataZoom 組件用於區域縮放； ②折線圖因有正負數，故選擇環比最小和最大值作爲折線圖的起

shenyi_201805 2020-07-06 16:40:17

echarts畫交錯柱狀圖

老闆要畫一個交錯的柱狀圖，要自適應屏幕大小。難度就在要搞清楚每個數據塊是哪一塊控制，要如何能夠自適應屏幕的大小。 比較關鍵的地方就是字體全用rem的方式不用px來固定，echarts的涉及到的屬性也全用百分比就基本解決切分辨率的時候出現變

听雨落寒江 2020-07-06 13:16:07