echarts 幾種常見的圖表的實現及原始碼

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

1、折線圖

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單檔案引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts圖表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: '未來一週氣溫變化',
            subtext: '純屬虛構'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['最高氣溫', '最低氣溫']
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日']
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name: '最高氣溫',
                type: 'line',
                data: [11, 11, 15, 13, 12, 13, 10],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '最低氣溫',
                type: 'line',
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>

2、柱狀圖

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單檔案引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts圖表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text: '某地區蒸發量和降水量',
            subtext: '純屬虛構'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['蒸發量','降水量']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'蒸發量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'降水量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>

3、餅狀圖

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單檔案引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts圖表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text: '某站點使用者訪問來源',
            subtext: '純屬虛構',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'訪問來源',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接訪問'},
                    {value:310, name:'郵件營銷'},
                    {value:234, name:'聯盟廣告'},
                    {value:135, name:'視訊廣告'},
                    {value:1548, name:'搜尋引擎'}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>

4、標準地圖

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單檔案引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts圖表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text: 'iphone銷量',
            subtext: '純屬虛構',
            x:'center'
        },
        tooltip : {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            x:'left',
            data:['iphone3','iphone4','iphone5']
        },
        dataRange: {
            min: 0,
            max: 2500,
            x: 'left',
            y: 'bottom',
            text:['高','低'],           // 文字，預設為數值文字
            calculable : true
        },
        toolbox: {
            show: true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series : [
            {
                name: 'iphone3',
                type: 'map',
                mapType: 'china',
                roam: false,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '北京',value: Math.round(Math.random()*1000)},
                    {name: '天津',value: Math.round(Math.random()*1000)},
                    {name: '上海',value: Math.round(Math.random()*1000)},
                    {name: '重慶',value: Math.round(Math.random()*1000)},
                    {name: '河北',value: Math.round(Math.random()*1000)},
                    {name: '河南',value: Math.round(Math.random()*1000)},
                    {name: '雲南',value: Math.round(Math.random()*1000)},
                    {name: '遼寧',value: Math.round(Math.random()*1000)},
                    {name: '黑龍江',value: Math.round(Math.random()*1000)},
                    {name: '湖南',value: Math.round(Math.random()*1000)},
                    {name: '安徽',value: Math.round(Math.random()*1000)},
                    {name: '山東',value: Math.round(Math.random()*1000)},
                    {name: '新疆',value: Math.round(Math.random()*1000)},
                    {name: '江蘇',value: Math.round(Math.random()*1000)},
                    {name: '浙江',value: Math.round(Math.random()*1000)},
                    {name: '江西',value: Math.round(Math.random()*1000)},
                    {name: '湖北',value: Math.round(Math.random()*1000)},
                    {name: '廣西',value: Math.round(Math.random()*1000)},
                    {name: '甘肅',value: Math.round(Math.random()*1000)},
                    {name: '山西',value: Math.round(Math.random()*1000)},
                    {name: '內蒙古',value: Math.round(Math.random()*1000)},
                    {name: '陝西',value: Math.round(Math.random()*1000)},
                    {name: '吉林',value: Math.round(Math.random()*1000)},
                    {name: '福建',value: Math.round(Math.random()*1000)},
                    {name: '貴州',value: Math.round(Math.random()*1000)},
                    {name: '廣東',value: Math.round(Math.random()*1000)},
                    {name: '青海',value: Math.round(Math.random()*1000)},
                    {name: '西藏',value: Math.round(Math.random()*1000)},
                    {name: '四川',value: Math.round(Math.random()*1000)},
                    {name: '寧夏',value: Math.round(Math.random()*1000)},
                    {name: '海南',value: Math.round(Math.random()*1000)},
                    {name: '臺灣',value: Math.round(Math.random()*1000)},
                    {name: '香港',value: Math.round(Math.random()*1000)},
                    {name: '澳門',value: Math.round(Math.random()*1000)}
                ]
            },
            {
                name: 'iphone4',
                type: 'map',
                mapType: 'china',
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '北京',value: Math.round(Math.random()*1000)},
                    {name: '天津',value: Math.round(Math.random()*1000)},
                    {name: '上海',value: Math.round(Math.random()*1000)},
                    {name: '重慶',value: Math.round(Math.random()*1000)},
                    {name: '河北',value: Math.round(Math.random()*1000)},
                    {name: '安徽',value: Math.round(Math.random()*1000)},
                    {name: '新疆',value: Math.round(Math.random()*1000)},
                    {name: '浙江',value: Math.round(Math.random()*1000)},
                    {name: '江西',value: Math.round(Math.random()*1000)},
                    {name: '山西',value: Math.round(Math.random()*1000)},
                    {name: '內蒙古',value: Math.round(Math.random()*1000)},
                    {name: '吉林',value: Math.round(Math.random()*1000)},
                    {name: '福建',value: Math.round(Math.random()*1000)},
                    {name: '廣東',value: Math.round(Math.random()*1000)},
                    {name: '西藏',value: Math.round(Math.random()*1000)},
                    {name: '四川',value: Math.round(Math.random()*1000)},
                    {name: '寧夏',value: Math.round(Math.random()*1000)},
                    {name: '香港',value: Math.round(Math.random()*1000)},
                    {name: '澳門',value: Math.round(Math.random()*1000)}
                ]
            },
            {
                name: 'iphone5',
                type: 'map',
                mapType: 'china',
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '北京',value: Math.round(Math.random()*1000)},
                    {name: '天津',value: Math.round(Math.random()*1000)},
                    {name: '上海',value: Math.round(Math.random()*1000)},
                    {name: '廣東',value: Math.round(Math.random()*1000)},
                    {name: '臺灣',value: Math.round(Math.random()*1000)},
                    {name: '香港',value: Math.round(Math.random()*1000)},
                    {name: '澳門',value: Math.round(Math.random()*1000)}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>

以上程式碼來自echarts 官網，我總結了常用的幾種圖表，實際應用中，講js檔案換成本地的就可以了

echarts 幾種常見的圖表的實現及原始碼

1、折線圖 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <

分庫分表的幾種常見玩法及如何解決跨庫查詢等問題

時間擔憂 idt web 分布 rpc sharding har 安全性在談論數據庫架構和數據庫優化的時候，我們經常會聽到“分庫分表”、“分片”、“Sharding”…這樣的關鍵詞。讓人感到高興的是，這些朋友所服務的公司業務量正在（或者即將面臨）高速增長，技術方面也面臨

Python中幾種常見方法實現斐波那契數列

Python常見斐波那契解決方案 n=35 #1.遞迴求斐波那契 def fibo(n): return 1 if n<3 else fibo(n-1)+fibo(n-2) print(fibo(n)) #2.迴圈求斐波那契 f1,f2=0,1 for i

IOS幾種常見的實現掃描、生成二維碼的方式（一、使用ZBar SDK）

最近專案中使用到掃描二維碼的功能，要求還蠻多的，包括介面的定製，掃描靈敏度，使用的穩定性等等。於是，研究總結了一下IOS中幾種掃描二維碼的實現方式。基本上我們的實現方法有三大途徑：ZBar、ZXing、AVFoundation。在 iOS7

java中ArrayList使用remove刪除元素時幾種常見的問題及解決辦法

一，for迴圈使用remove()刪除座標來刪除元素。問題現象：迴圈的時候被刪除元素的下個元素不能讀取到。程式碼現象如下： List<String> testList1 = new ArrayList<Stri

幾種常見計算機影象處理操作的原理及canvas實現

2013-09-21 • 技術文章 • 評論前言即使沒有計算機圖形學基礎知識的讀者也完全不用擔心您是否適合閱讀此文，本文的性質屬於科普文章，將為您揭開諸如Photoshop、Fireworks、GIMP等軟體的影象處理操作的神祕面紗。之前您也許對這些處理技術感到驚

幾種常見的加密演算法及 Java 實現

介紹本文主要對加密演算法做個概況性的介紹，然後給出幾種簡單的加密演算法 Java 實現。 1. 演算法種類單向加密對稱加密非對稱加密 1.1 單向加密即加密之後不能解密，一般用於資料驗證 1） Base64 Base64

rabbitmq系列（二）幾種常見模式的應用場景及實現

一、簡單模式原理：生產者將訊息交給預設的交換機，交換機獲取訊息後交給繫結這個生產者的佇列（投遞規則為佇列名稱和routing key 相同的佇列），監聽當前佇列的消費者獲取資訊並執行消費邏輯。場景：有一個oa系統，使用者通過接收手機驗證碼進行註冊，頁面上點選獲取驗證碼後，將驗證碼放到訊息佇列，然後簡訊

Linux進程控制理論及幾種常見進程間通信機制

運行 string bin linux進程資源 linu 多個進程子進程 oid 1. Linux進程控制理論 ① 進程是一個具有一定獨立功能的程序的一次運行活動（動態性、並發性、獨立性、異步性）。　　進程的四要素：　　（1）有一段程序供其執行（不一定是一個進程所專

使用CSS替代JS實現幾種常見的特效

本文介紹用CSS代替JS來實現我們頁面中所需要的幾種常見效果。包括導航高亮，下拉選單等。 1. 導航高亮導航高亮是一種很常見的問題，包括當前頁面的導航在選單裡面高亮和hover時高亮。你可以用js控制，

loadrunner的幾種常見錯誤及解決辦法

1、錄製loadrunner指令碼時，無法生成指令碼，錄製過程中事物都有顯示，我把所有防火牆和網路保護都關了，但是指令碼就是無法生成，協議之類的都是對的。解決：在錄製選項option->network-> ort Map

web實現資料互動的幾種常見方式

前言在當今社會，作為一名前端程式猿，並不是一昧的去製作靜態頁面就可以滿足滴；你說你會製作網頁，好吧，只能說你算是一個前端程式猿。但這是你作為一個程式猿最基本的能力，並不會為你進行加分；　　我們都明白，要想提高競爭力，提高自己的技能是十灰重要的。前後臺的資

java中幾種常見的排序演算法實現

Nginx小技巧——幾種常見實現301重定向方法上的區別

Nginx下常見的301跳轉有以下三種，雖然都能達到同樣的目的。但是三種寫法上還是有區別的，主要的區別是在正則匹配的效能上。第一種：使用rewrite指令，通過正則匹配所有的URI後再去掉開頭第一個/(反斜線)。 rewrite ^/(.*)$ https://www.hi-linux.com/

Java實現幾種常見排序方法

package test.sort; import java.util.Random; //Java實現的排序類 publicclass NumberSort { //私有構造方法，禁止例項化 private NumberSort() { super();

幾種常見的排序演算法及它們之間的比較

1.穩定性比較插入排序、氣泡排序、二叉樹排序、二路歸併排序及其他線形排序是穩定的選擇排序、希爾排序、快速排序、堆排序是不穩定的 2.時間複雜性比較插入排序、氣泡排序、選擇排序的時間複雜性為O(n2) 其它非線形排序的時間複雜性為O(nlog2n) 線形排序的

幾種常見演算法的Python實現

1、選擇排序選擇排序是一種簡單直觀的排序演算法。它的原理是這樣：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然後，再從剩餘未排序元素中繼續尋找最小（大）元素，然後放到已排序序列的後面，以此類推，直到所有元素均排序完畢。演算法實現如下： #找到最小的元素 def Fin

Java實現幾種常見排序方法（下） .

插入排序的工作原理是通過構建有序序列，對於未排序資料，在已排序序列中從後向前掃描，找到相應位置並插入。其具體步驟參見程式碼及註釋。 [java] view plaincopyprint? /** * 插入排序<br/> * <ul>

幾種常見的排序的Java實現

氣泡排序氣泡排序的主要的思想是：比較兩個相鄰的元素，如果左邊大於右邊的話就交換兩個元素的位置。這樣的背景下：需要兩層迴圈，外層迴圈根據陣列中數目的多少確定迴圈次數，而內層的迴圈根據每次比較的次數確定迴圈次數。這樣做的時間複雜度為O（n^2） public class Bubbl

用php實現幾種常見的排序演算法

一、氣泡排序氣泡排序理解起來是最簡單，但是時間複雜度（O(n^2)）也是最大的之一，實現程式碼如下： function bubbleSort($arr) { $len = count(

echarts 幾種常見的圖表的實現及原始碼

相關推薦