本文作者鋼頭娃，轉載請備註 "Echarts" 快速入門 Echarts 介紹 ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢 ...

本文作者鋼頭娃，轉載請備註

Echarts 快速入門

Echarts 介紹

ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關係數據可視化的關係圖、旭日圖，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，儀錶盤，並且支持圖與圖之間的混搭。
2018年3月全球著名開源社區Apache宣佈百度ECharts進入Apache孵化器。

特性

豐富的可視化類型

多種數據格式無需轉換直接使用

千萬數據的前端展現

移動端優化

多渲染方案，跨平臺使用

動態數據

絢麗的特效

安裝

獲取Echarts

最直接的方法是在ECharts的官方網址中挑選適合您的版本進行下載，不同的打包下載應用於不同的開發者功能與體積的需求，或者也可以直接下載完整版本;開發環境建議下載源代碼版本，這個裡麵包含了常見的錯誤提示和警告

通過 npm 獲取 echarts，npm install echarts --save

cdn 引入，你可以在 cdnjs，npmcdn 或者國內的 bootcdn 上找到 ECharts 的最新版本。

快速上手

通過標簽方式直接引用構建好的E charts文件

繪製一個簡單的圖表

在繪圖前我們需要為E charts準備一個具備寬高的DOM容器，然後通過echarts.init方法初始化一個E charts實例並通過setOption方法生成一個簡單的柱狀圖，下麵是完整代碼和效果圖

<!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 = {
            title: {
                text: 'ECharts 入門示例'
            },
            grid:{
              top:'10%',
              right:'30%',
              bottom:'60%',
              left:'5%'
            },
            tooltip: {},
            legend: {
                data:['確診人數']
            },
            xAxis: {
                data: ["義大利","伊朗","西班牙","德國","瑞士","法國","美國","英國","南韓"]
            },
            yAxis: {},
            series: [{
                name: '確診人數',
                type: 'bar',
                data: [74386, 27017, 49515, 37323, 10897, 25233,69223,9529,9241]
            }]
        };
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

在webpack上使用E charts

通過 npm install echarts --save 命令安裝
通過 npm 上安裝的 ECharts 和 zrender 會放在node_modules目錄下。可以直接在項目代碼中 require('echarts') 得到 ECharts。

var echarts = require('echarts');
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 繪製圖表
myChart.setOption({
    title: {
        text: 'ECharts 入門示例'
    },
    grid:{
        top:'10%',
        right:'30%',
        bottom:'60%',
        left:'5%'
    },
    tooltip: {},
    legend: {
        data:['確診人數']
    },
    xAxis: {
        data: ["義大利","伊朗","西班牙","德國","瑞士","法國","美國","英國","南韓"]
    },
    yAxis: {},
    series: [{
        name: '確診人數',
        type: 'bar',
        data: [74386, 27017, 49515, 37323, 10897, 25233,69223,9529,9241]
    }]
});
//最終效果和上圖一樣

註意：渲染順序

Option常用配置項

backgroundColor 背景色

預設無背景transparent；顏色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六進位格式，比如 '#ccc'。除了純色之外顏色也支持漸變色和紋理填充

// 線性漸變，前四個參數分別是 x0, y0, x2, y2, 範圍從 0 - 1，相當於在圖形包圍盒中的百分比，如果 globalCoord 為 true，則該四個值是絕對的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 處的顏色
    }, {
        offset: 1, color: 'blue' // 100% 處的顏色
    }],
    global: false // 預設為 false
}
// 徑向漸變，前三個參數分別是圓心 x, y 和半徑，取值同線性漸變
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 處的顏色
    }, {
        offset: 1, color: 'blue' // 100% 處的顏色
    }],
    global: false // 預設為 false
}
// 紋理填充
color: {
    image: imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字元串
    repeat: 'repeat' // 是否平鋪, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

title標題組件

show: 是否顯示標題組件，預設值 true-boolean類型

text: 主標題文本，支持使用\n換行-string類型

link: 主標題文本超鏈接-string類型

textStyle: 主標題的樣式-Object類型

subtext: 副標題文本，支持\n換行-string類型

legend圖例標簽

show:是否顯示，預設true

left: 圖例組件距離容器左側的距離，值可以是數字，百分比，left，center，right

top: 組件舉例容器頂部的距離，值可以是數字，百分比，top，middle，bottom

right: 組件舉例容器右側的距離，其他和left一樣

bottom: 組件舉例容器頂部的距離，其他和top一樣

width: 組件的寬度，預設'auto'

height:組件的高度,預設'auto'

orient:圖例列表的佈局朝向，horizontal 橫向排列，vertical縱向排列

selected:圖例選中狀態表。

其他

dataset 數據集

source

grid網格標簽

直角坐標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪製折線圖，柱狀圖，散點圖（氣泡圖）。

show: 是否顯示直角坐標系網格,預設值false-boolean

left: 組件舉例容器左側的距離，值可以是數字，百分比，left，center，right

top: 組件舉例容器頂部的距離，值可以是數字，百分比，top，middle，bottom

right: 組件舉例容器右側的距離，其他和left一樣

bottom: 組件舉例容器頂部的距離，其他和top一樣

width: 組件的寬度，預設'auto'

height:組件的高度,預設'auto'

其他

一個DOM中放入多個坐標系

x: 組件在DOM中的橫坐標位置,如果使用了left，x不生效；x和right一起使用，right不生效

y: 組件在DOM中的縱坐標位置,如果使用了top，x不生效；y和bottom一起使用，bottom不生效

案例:

xAxis

show:是否顯示 x 軸,預設true

position: x軸的位置，預設borrom，也可以是top

name:坐標軸名稱

nameLocation:坐標軸名稱顯示位置，預設值end；值的範圍是start/middle/center/end

其他

yAxis

show:是否顯示 y 軸,預設true

position: y軸的位置，預設left，也可以是right

name:坐標軸名稱

nameLocation:坐標軸名稱顯示位置，預設值end；值的範圍是start/middle/center/end

tooltip提示框組件

show:是否顯示提示框組件，預設值true

trigger:觸發類型，預設值item-數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用；也可以設置axis-坐標軸觸發，主要在柱狀圖和折線圖等會使用類目軸的圖表中使用；none-什麼都不觸發

showContent:是否顯示內容，預設true

toolbox工具欄組件

show：是否顯示工具欄組件，預設顯示

orient:工具欄佈局朝向，預設horizontal橫向，vertical縱向

feature: 工具欄配置項

saveAsImage: 保存為圖片

restore: 配置項還原

dataView: 數據視圖工具

dataZoom: 數據縮放

magicType: 動態類型切換，type:['line', 'bar', 'stack', 'tiled']

showTitle:滑鼠hover的時候是否顯示icon的標題，預設true

radar雷達坐標系組件

center = ['50%','50%']圓心坐標，第一項是橫坐標，第二項是縱坐標

radius: 半徑，【number/string/Array】

name:雷達圖的名稱

shape:雷達圖繪製類型，預設是多邊形polygon【polygon/circle】

axisLine:坐標軸軸線相關設置

axisTick:坐標軸刻度相關設置

axisLabel:坐標軸刻度標簽的相關設置

dataZoom 區域縮放

dataZoom-inside:內置型數據區域縮放組件

type:inside 預設值

start:數據視窗範圍的起始百分比。範圍是：0 ~ 100。表示 0% ~ 100%。

end :數據視窗範圍的結束百分比。範圍是：0 ~ 100。

orient:佈局方向【horizontal/vertical】

dataZoom-slider:滑動條型數據區域縮放組件

type: slider 預設值

backgroundColor 組件背景色

fillerColor 選中範圍的填充顏色

borderColor 邊框的顏色

start:數據視窗範圍的起始百分比。範圍是：0 ~ 100。表示 0% ~ 100%。

end :數據視窗範圍的結束百分比。範圍是：0 ~ 100。

orient:佈局方向【horizontal/vertical】

geo 地理坐標系組件

show: 是否顯示地理坐標系組件

map:地圖類型，例如：china，world

zoom: 當前視角的縮放比例

nameMap:自定義地區的名稱

label: 圖形上的文本標簽

roam:是否開啟縮放和平移漫游【scale/move/true/false】

center:當前視角的中心點，用經緯度表示

aspectScale: 長寬比例

visualMap數據展示類型

visualMap-piecewise:分段型

type: piecewise

splitNumber: 對於連續型數據，自動平均分成幾段，預設5段

pieces: 分段式視覺映射組件

min :最小值

max :最大值

lt :小於

gt :大於

gte :大於等於

lte :小於等於

註意:如果兩個piece的區間重疊，則會自動進行去重

其他

visualMap-continuous:連續型

type:continuous

min:最小值

max:最大值

range:指定手柄對應數值的位置，range 應在 min max 範圍內，如果不設置，會自適應，與最大值最小值一樣，例如max = 100,min=1,range = [1,100]

itemWidth : 圖型的寬度

itemHeight :圖形的高度

text:兩端的文本，格式['high','low'],前面的值高後面的值低

其他

series系列列表

series-line:折線/面積圖

type: 預設值line

name: 系列名稱

coordinateSystem:該系列使用的坐標系，預設使用cartesian2d二維的直角坐標系，polar是極坐標系

clip:是否裁剪超出坐標部分的圖形，除自定義系列預設都為true

step:是否採用階梯線圖，預設false，也支持設置成start/middle/end

lanel:圖形上的文本標簽

show:是否顯示，預設false

formatter:標簽內容格式

{a}：系列名

{b}：數據名

{c}：數據值

data:數據,數據個數與xAxis中的data個數數量一樣

series-bar:柱狀/條形圖

type:預設值bar

name:系列名稱

coordinateSystem:預設值'cartesian2d'，沒有其他值可以使用

label,data和series-line的一樣

series-pie:餅圖

type:預設值pie

name:系列名稱

hoverAnimation: 是否開啟滑鼠在扇區hover的放大動畫效果，預設值true

roseType: 是否展示成南丁格爾圖，通過半徑區分數據大小，值的範圍：

'radius'扇區圓心角展現數據的百分比，半徑展現數據的大小

'area' 所有扇區圓心角相同，僅通過半徑展現數據大小。

label:餅圖圖形上的標簽

show :預設值true

position: 標簽的位置【outside/inside/inner/center】

formatter:標簽內容格式

{a}：系列名

{b}：數據名

{c}：數據值

{d}: 百分比

{@xxx}：數據中名為'xxx'的維度的值，如{@product}表示名為'product' 的維度的值。

{@[n]}：數據中維度n的值，如{@[3]}` 表示維度 3 的值，從 0 開始計數。

emphasis:高亮的扇區和標簽樣式。

center:餅圖的中心（圓心）坐標,數組的第一項是橫坐標，第二項是縱坐標。

radius:餅圖的半徑,【number/string/array】

data:系列中的數據內容數組

series-scatter:散點圖

type:scatter 預設值

name:系列名稱

symbol:標記的圖形,預設circle。【circle/rect/roundRect/triangle/diamond/pin/arrow/none】

symbolSize:標記的大小

label:圖形上的文本標簽

show：是否顯示標簽

position:標簽的位置【top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight】

series-radar:雷達圖

type:radar 預設值

name: 系列名稱

symbol:標記的圖形,預設circle。【circle/rect/roundRect/triangle/diamond/pin/arrow/none】

series-map:地圖

markPoint:圖表標註

markLine:圖表標線

常用api

init 創建一個Echarts實例，返回echartsInstance，不能在單個容器上初始化多個Echarts實例

參數：dom實例容器，一般是一個具有高寬的div元素

參數：theme 應用的主題

附加參數：opts

devicePixelRatio：設備像素比

renderer：渲染器，支持canvas或者svg

width:可顯式指定實例寬度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（實例容器）的寬度。

height:可顯式指定實例高度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（實例容器）的高度。

setOption 設置圖表實例的配置項以及數據，萬能介面，所有參數和數據的修改都可以通過 setOption 完成，ECharts 會合併新的參數和數據，然後刷新圖表。

getWidth 獲取容器的寬度

getHeight 獲取容器的高度

getDom 獲取 ECharts 實例容器的 dom 節點。

getOption 獲取當前實例中維護的 option 對象

resize 改變圖表尺寸，在容器大小發生改變時需要手動調用。

參數：opts

width:可顯式指定實例寬度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（實例容器）的寬度。

height:可顯式指定實例高度，單位為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（實例容器）的高度。

on 綁定事件處理函數

參數 eventName：事件名稱，全小寫，例如'click'，'mousemove', 'legendselected'

參數 query：可選的過濾條件，能夠只在指定的組件或者元素上進行響應。

參數 handler: 事件處理函數，格式為（event：object）

參數 context:可選，回調函數內部的context，即this的指向。

案例：

chart.on('click', 'series', function () {...});

chart.on('click', 'series.line', function () {...});

chart.on('click', 'dataZoom', function () {...});

chart.on('click', 'xAxis.category', function () {...});

showLoading:顯示動畫載入效果

hideLoading:隱藏動畫載入效果

getDataURL:導出圖表圖片，返回一個 base64 的 URL，可以設置為Image的src。

clear：清空當前實例

非同步數據載入

loading動畫

如果數據載入時間較長，一個空的坐標軸放在畫布上也會讓用戶覺得是不是產生 bug 了，因此需要一個 loading 的動畫來提示用戶數據正在載入。
ECharts 預設有提供了一個簡單的載入動畫。只需要調用 showLoading 方法顯示。數據載入完成後再調用 hideLoading 方法隱藏載入動畫。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

使用loading案例

function fetchData(cb) {
    // 通過 setTimeout 模擬非同步載入
    setTimeout(function () {
        cb({
            categories: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],
            data: [5, 20, 36, 10, 10, 20]
        });
    }, 3000);
}
// 初始 option
option = {
    title: {
        text: '非同步數據載入示例'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: []
    }]
};
myChart.showLoading();
fetchData(function (data) {
    myChart.hideLoading();
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根據名字對應到相應的系列
            name: '銷量',
            data: data.data
        }]
    });
});

案例效果

經典使用案例

折線圖

案例一

//配置項
option = {
    xAxis: {
        type: 'category',//類目軸
        boundaryGap: false,//坐標軸兩邊是否留白，預設是true
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'//可以不寫，預設type:value
    },
    series: [{//series-line
        data: [820, 932, 901, 934, 1290, 1330, 1300],
        type: 'line',
        areaStyle: {},//使用區域
        smooth:true,//圓潤的折線
        markPoint: {//使用點
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
        markLine:{//使用線
            data:[
            {type:'average',name:'平均值'}
            ]
        }
    }]
};

案例一效果圖

案例二

 option = {
        legend: {
            orient :'horizontal',//預設是橫向排列，也可以是豎向'vertical'
            left:'center',//可以是方位詞
            top:'10%'//也可以是數值和百分比
        },//標註系列的名稱和顏色
        tooltip: {//提示框
            trigger: 'axis',//坐標觸發，還可以是item，只顯示一個數據
            showContent: true//提示框顯示
        },
        toolbox:{
            top:'10%',
            right:'10%',
            feature:{
                dataView: {readOnly: false},//是否只讀
                magicType: {type: ['line', 'bar']},//切換的圖形
                restore: {},//數據還原
                saveAsImage: {}//保存圖片
            }
        },
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        grid: {
            top: '20%',//距離dom容器頂部
            right:'10%',//...右側
            bottom:'10%',//底部
            left:'10%'//左側
        },
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        ]
    };

案例二效果圖

柱狀圖

案例一

option = {
    title: {
        left:'center',
        top:'3%',
        text: '某地區蒸發量和降水量',
        subtext: '純屬虛構'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['蒸發量', '降水量'],
        top:'10%'
    },
    toolbox: {
        show: true,
        top:'10%',
        feature: {
            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'//可以不寫，預設value
        }
    ],
    grid: {
            top: '20%',//距離dom容器頂部
            right:'10%',//...右側
            bottom:'10%',//底部
            left:'10%'//左側
        },
    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},
                    {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};

案例一效果圖

案例二

option = {
    backgroundColor:'#323a5e',//背景色
    tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐標軸指示器，坐標軸觸發有效
            type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
          }
        },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '20%',
        top:'20%',
        containLabel: true//是否包含刻度尺，預設不包含
    },
    legend:{//圖例組件
          data: ['累計確診', '治愈數', '死亡數'],//這裡的data值要和series里每一組數據的name相同
          right: 'center',
          top:'10%',
          textStyle: {
            color: "#fff"
          },
          itemWidth: 12,//圖例組件寬度
          itemHeight: 10,//圖例組件高度
        itemGap: 35//每項之間的間隔
    },
    xAxis:{
          type: 'category',
          data: ['美國','義大利','西班牙','德國','法國','伊朗','葡萄牙','以色列'],
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
        },
    yAxis:{
        type: 'value',
        max:'20000',//縱坐標軸的最大刻度
        axisLine: {
            show: false,//不顯示縱坐標軸
            lineStyle: {
              color: 'white'
            }
          },
        splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
        axisLabel: {}
    },
    series: [
        {
          name: '累計確診',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#fccb05'
                }, {
                    offset: 1,
                    color: '#f5804d'
                }]),
                barBorderRadius: 12,
            },
          },
          data: [160020, 101739, 85195, 66885, 44550, 41495,  6480, 4695]
        },
        {
          name: '治愈數',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#8bd46e'
                }, {
                    offset: 1,
                    color: '#09bcb7'
                }]),
                barBorderRadius: 11,
            }
          },
           data: [5595, 14620, 16780, 13500, 7924, 13911,256, 3302]
        },
        {
          name: '死亡數',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#248ff7'
                }, {
                    offset: 1,
                    color: '#6851f1'
                }]),
            barBorderRadius: 11,
            }
          },
          data: [2953, 11591, 7340, 645, 3024, 2757, 1408, 180]
        }],
    dataZoom: [//滑動組件
            {
            type:"slider",//水平滑塊，選擇區間
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom:'8%',
            start: 10,
            end: 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
            color:"#d3dee5",
          },
          textStyle:{ color:"#fff"},
          borderColor:"#90979c"
        },
        {
          type: "inside",//縱向滑動,縮放
          show: true,
          height: 15,
          start: 1,
          end: 35
        }
    ],
};

案例二效果圖

餅圖

案例一

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}例 ({d}%)'//提示框顯示內容的格式【{a}:系列名/{b}:數據名/{c}:數據值/{d}:百分比】
    },
    legend: {
        orient: 'horizontal',//圖例方向【'horizontal'\'vertical'】
        left: 'center',
        top:'10%',
        data: ['美國', '義大利', '西班牙', '德國', '法國','伊朗','英國','瑞士','比利時','荷蘭','土耳其','南韓']
    },
    series: [
        {
            name: '新冠疫情數據圖',
            type: 'pie',
            radius: ['0%', '40%'],//範圍0-100
            center: ['50%', '50%'],
            label: {
                show: false,
                position: 'outside'//標簽的位置【inside/outside/inner/center】
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            label: {
                show: true
            },
            data: [
                {value: 160020, name: '美國'},
                {value: 101739, name: '義大利'},
                {value: 85195, name: '西班牙'},
                {value: 66885, name: '德國'},
                {value: 44550, name: '法國'},
                {value: 41495, name: '伊朗'},
                {value: 22141, name: '英國'},
                {value: 15760, name: '瑞士'},
                {value: 11899, name: '比利時'},
                {value: 11750, name: '荷蘭'},
                {value: 10827, name: '土耳其'},
                {value: 9786, name: '法國'},
            ]
        },
    ]
};

案例一效果圖

案例二

var legenddata = [
{name:'美國',Confirmed:85840,Dead:1296},
{name:'義大利',Confirmed:80589,Dead:8215},
{name:'西班牙',Confirmed:57786,Dead:4365},
{name:'德國',Confirmed:43938,Dead:267},
{name:'法國',Confirmed:29566,Dead:1698},
{name:'伊朗',Confirmed:29406,Dead:2234},
{name:'英國',Confirmed:11812,Dead:580},
{name:'瑞士',Confirmed:11811,Dead:191},
{name:'南韓',Confirmed:9332,Dead:139},
{name:'荷蘭',Confirmed:7469,Dead:435},
{name:'奧地利',Confirmed:6909,Dead:49},
{name:'比利時',Confirmed:6235,Dead:220},
{name:'加拿大',Confirmed:4046,Dead:39},
{name:'土耳其',Confirmed:3629,Dead:75},
{name:'葡萄牙',Confirmed:3544,Dead:60},
{name:'挪威',Confirmed:3372,Dead:14},
{name:'澳大利亞',Confirmed:2991,Dead:13},
{name:'巴西',Confirmed:2985,Dead:77},
{name:'瑞典',Confirmed:2840,Dead:77},
{name:'以色列',Confirmed:2693,Dead:8}
],
 option = {
    toolbox: {
        show: true,//false則不顯示工具欄
        feature: {
            saveAsImage: {show: true,type:'jpeg'}
        },
        top:'10%',
        right:"5%"
    },
    title: {
        text: '人民日報式海外疫情玫瑰圖',
        subtext: '\n使用2020-03-27數據',
        x: '60%',
        y: '150',
        textStyle:
        {fontSize:27,
        fontWeight:'bold',
        fontFamily:'Microsoft YaHei',
        color:'#000'
        },
        subtextStyle:
        {
            fontStyle:'italic',
			fontSize:14
        }
    },
     legend: {
        x: '60%',//水平位置，【left\center\right\數字】
        y: '350',//垂直位置，【top\center\bottom\數字】
        align:'left',//字在圖例的左邊或右邊【left/right】
        orient:'vertical',//圖例方向【horizontal/vertical】
        icon: "circle",   //圖例形狀【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
        textStyle://圖例文字
        {
            fontFamily:'微軟雅黑',
            color:'#000',
        },
        data: ['美國','義大利','西班牙','德國','法國','伊朗','英國','瑞士','南韓','荷蘭','','奧地利','比利時','加拿大','土耳其','葡萄牙','挪威','澳大利亞','巴西','瑞典'],
        formatter: function(params)  {
            console.log('圖例參數',params) 
            for (var i=0;i<legenddata.length;i++){
                  if (legenddata[i].name== params){
                      return params+"\t確診:"+legenddata[i].Confirmed+"\t死亡:"+legenddata[i].Dead;
                     }
              }
        } 
     },
	calculable: true,
    series: [
        {
            name: '半徑模式',
            type: 'pie',
            clockWise: false ,
            radius: [20, 400],
            center: ['40%', '60%'],
            roseType: 'area',
			label:{
			    show:true,
			    position: 'inside'//標簽的位置【inside/outside/inner/center】
			},
            data:[
                    {name:'美國',value:292.9846412,},
                    {name:'義大利',value:283.8820177},
                    {name:'西班牙',value:240.3871877},
                    {name:'德國',value:209.6139308},
                    {name:'法國',value:171.9476665},
                    {name:'伊朗',value:171.4817775},
                    {name:'英國',value:108.6830254},
                    {name:'瑞士',value:108.6784247},
                    {name:'南韓',value:96.60227741},
                    {name:'荷蘭',value:86.42337647},
                    {name:'奧地利',value:83.12039461},
                    {name:'比利時',value:78.96201618},
                    {name:'加拿大',value:63.60817558},
                    {name:'土耳其',value:60.24118193},
                    {name:'葡萄牙',value:59.53150426},
                    {name:'挪威',value:58.06892456},
                    {name:'澳大利亞',value:54.69003566},
                    {name:'巴西',value:54.63515352},
                    {name:'瑞典',value:53.29165038}]
        },
        {
            name:'透明圓圈',
            type:'pie',
            radius: [10,27],
            center: ['40%', '60%'],
            itemStyle: {
                    color: 'rgba(250, 250, 250, 0.3)',
    },
            data:[
                {value:10,name:''}
            ]
        },
        {
            name:'透明圓圈',
            type:'pie',
            radius: [10,35],
            center: ['40%', '60%'],
            itemStyle: {
                    color: 'rgba(250, 250, 250, 0.3)',
    },
            data:[
                {value:10,name:''}
            ]
        }
            ] 
};

案例二效果圖

散點圖

案例一

var dataAll = [
        [10.0, 8.04],
        [8.0, 6.95],
        [13.0, 7.58],
        [9.0, 8.81],
        [11.0, 8.33],
        [14.0, 9.96],
        [6.0, 7.24],
        [4.0, 4.26],
        [12.0, 10.84],
        [7.0, 4.82],
        [5.0, 5.68],
        [10.0, 9.14],
        [8.0, 8.14],
        [13.0, 8.74],
        [9.0, 8.77],
        [11.0, 9.26],
        [14.0, 8.10],
        [6.0, 6.13],
        [4.0, 3.10],
        [12.0, 9.13],
        [7.0, 7.26],
        [5.0, 4.74],
        [10.0, 7.46],
        [8.0, 6.77],
        [13.0, 12.74],
        [9.0, 7.11],
        [11.0, 7.81],
        [14.0, 8.84],
        [6.0, 6.08],
        [4.0, 5.39],
        [12.0, 8.15],
        [7.0, 6.42],
        [5.0, 5.73],
        [8.0, 6.58],
        [8.0, 5.76],
        [8.0, 7.71],
        [8.0, 8.84],
        [8.0, 8.47],
        [8.0, 7.04],
        [8.0, 5.25],
        [19.0, 12.50],
        [8.0, 5.56],
        [8.0, 7.91],
        [8.0, 6.89],
];
option = {
    title: {
        text: '散點圖案例',
        left: 'center',
        top: 0
    },
    grid: {
    },
    tooltip: {
        formatter: '坐標 ({c})'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {},
    series: [
        {
            name: 'I',
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: dataAll,
        }
    ]
};

案例一效果圖

雷達圖

案例一

option = {
    backgroundColor: '#101736',
    color: ['#4A99FF', '#4BFFFC'], //顏色,
    legend: {
        orient: 'vertical',
        icon: 'circle', //圖例形狀
        data: ['車輛數', '設計車位'], //圖例,
        bottom: 35,
        right: 40,
        itemWidth: 14, // 圖例標記的圖形寬度。[ default: 25 ]
        itemHeight: 14, // 圖例標記的圖形高度。[ default: 14 ]
        itemGap: 21, // 圖例每項之間的間隔。[ default: 10 ]橫向佈局時為水平間隔，縱向佈局時為縱向間隔。
        textStyle: {
            fontSize: 14,
            color: '#00E4FF',
        },
    },
    radar: {
        shape: 'polygon', //雷達繪製類型，預設多邊形polygon【'polygon'/'circle'】
        name: {
            textStyle: {
                color: '#fff',
                fontSize: 16
            },
        },
        indicator: [{
                text: '小型車',
                max: 5000
            },
            {
                text: '中型車',
                max: 5000
            },
            {
                text: '大型車',
                max: 5000
            },
            {
                text: '貨  車',
                max: 5000
            },
            {
                text: '特種車',
                max: 5000
            },
            {
                text: '貴賓車',
                max: 5000
            },
        ],
        splitArea: { // 坐標軸在 grid 區域中的分隔區域，預設不顯示。
            show: true,
            areaStyle: { // 分隔區域的樣式設置。
                color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔區域顏色。分隔區域會按數組中顏色的順序依次迴圈設置顏色。預設是一個深淺的間隔色。
            }
        },
        axisLine: { //指向外圈文本的分隔線樣式
            //show:false,//預設true
            lineStyle: {
                color: '#153269'
            }
        },
        splitLine: { //分割線
            //show:false,//預設顯示
            lineStyle: {
                color: '#113865', // 分隔線顏色
                width: 1, // 分隔線線寬
            }
        },
    },
    series: [{
        name: '車輛數',
        type: 'radar',
        symbolSize: 5, //坐標軸上的點的大小
        symbol: 'angle', //點的樣式，預設circle【circle/rect/roundRect/triangle/diamond/pin/arrow/none】
        data: [{
                value: [4300, 4700, 3600, 3900, 3800, 4200],
                itemStyle: {
                    lineStyle: {
                        color: '#4A99FF',
                    },
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0, //右
                        y: 0, //下
                        x2: 1, //左
                        y2: 1, //上
                        colorStops: [{
                            offset: 0,
                            color: '#4A99FF'
                        }, {
                            offset: 0.5,
                            color: 'rgba(0,0,0,0)'
                        }, {
                            offset: 1,
                            color: '#4A99FF'
                        }],
                        globalCoord: false
                    },
                    opacity: 1 // 區域透明度
                }
            },
            {
                name: '設計車位',
                value: [3200, 3000, 3400, 2000, 3900, 2000],
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#4BFFFC',
                        },
                        shadowColor: '#4BFFFC',
                        shadowBlur: 10,
                    },
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0, //右
                        y: 0, //下
                        x2: 1, //左
                        y2: 1, //上
                        colorStops: [{
                            offset: 0,
                            color: '#4BFFFC'
                        }, {
                            offset: 0.5,
                            color: 'rgba(0,0,0,0)'
                        }, {
                            offset: 1,
                            color: '#4BFFFC'
                        }],
                        globalCoord: false
                    },
                    opacity: 1 // 區域透明度
                }
            }
        ]
    }]
};

案例一效果圖

地圖

案例一

//數據
window.dataList = [
    {name: "南海諸島",value: 0},
    {name: '北京',value: 54},
    {name: '天津',value: 13},
    {name: '上海',value: 40},
    {name: '重慶',value: 75},
    {name: '河北',value: 13},
    {name: '河南',value: 83},
    {name: '雲南',value: 11},
    {name: '遼寧',value: 19},
    {name: '黑龍江',value: 15},
    {name: '湖南',value: 69},
    {name: '安徽',value: 60},
    {name: '山東',value: 39},
    {name: '新疆',value: 4},
    {name: '江蘇',value: 31},
    {name: '浙江',value: 104},
    {name: '江西',value: 36},
    {name: '湖北',value: 1052},
    {name: '廣西',value: 33},
    {name: '甘肅',value: 7},
    {name: '山西',value: 9},
    {name: '內蒙古',value: 7},
    {name: '陝西',value: 22},
    {name: '吉林',value: 4},
    {name: '福建',value: 18},
    {name: '貴州',value: 5},
    {name: '廣東',value: 98},
    {name: '青海',value: 1},
    {name: '西藏',value: 0},
    {name: '四川',value: 44},
    {name: '寧夏',value: 4},
    {name: '海南',value: 22},
    {name: '臺灣',value: 3},
    {name: '香港',value: 5},
    {name: '澳門',value: 5}
];
option = {
    title:{
        text:'早期新型冠狀病毒感染分佈圖',//大標題
        subtext:"數據來自2020-01-25日"//副標題
    },
    tooltip: {//提示框
        triggerOn: "mousemove",//提示框觸發【mousemove/click/mousemove|click/none】
    },
    visualMap: {
        type:'piecewise',//數據展示類型預設piecewise為分段型展示，【piecewise/continuous】
        min: 0,
        max: 1000,
        left: 26,
        bottom: 40,
        showLabel: !0,
        text: ["高", "低"],
        pieces: [{
            gt: 100,
            label: "> 100 人",
            color: "#7f1100"
        }, {
            gte: 10,
            lte: 100,
            label: "10 - 100 人",
            color: "#ff5428"
        }, {
            gte: 1,
            lt: 10,
            label: "1 - 9 人",
            color: "#ff8c71"
        }, {
            gt: 0,
            lt: 1,
            label: "疑似",
            color: "#ffd768"
        }, {
            value: 0,
            color: "#ffffff"
        }],
        show: true//可以不寫，預設是顯示
    },
    geo: {
        map: "china",
        roam: false,//是否開啟滑鼠縮放和平移漫游，預設不開起【scale/move/false/true】
        scaleLimit: {
            min: 1,
            max: 2
        },
        zoom: 1.0,//當前視角縮放比例
        top: 120,
        label: {
            normal: {
                show: !0,
                fontSize: "14",
                color: "rgba(0,0,0,0.7)"
            }
        },
        itemStyle: {
            normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"//邊框顏色
            },
            emphasis: {
                areaColor: "#f2d5ad",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0
            }
        }
    },
    series: [{
        name: "確診病例",
        type: "map",
        map:"china",//可以不寫
        geoIndex: 0,
        data: window.dataList
    }]
};

案例一效果圖

Echarts快速入門

Echarts 快速入門

Echarts 介紹

特性

安裝

獲取Echarts

快速上手

繪製一個簡單的圖表

在webpack上使用E charts

Option常用配置項

backgroundColor 背景色

title標題組件

legend圖例標簽

dataset 數據集

grid網格標簽

一個DOM中放入多個坐標系

xAxis

yAxis

tooltip提示框組件

toolbox工具欄組件

radar雷達坐標系組件

dataZoom 區域縮放

geo 地理坐標系組件

visualMap數據展示類型

series系列列表

常用api

非同步數據載入

loading動畫

使用loading案例

案例效果

經典使用案例

折線圖

案例一

案例一效果圖

案例二效果圖

柱狀圖

案例一

案例一效果圖

案例二

案例二 效果圖

餅圖

案例一

案例一效果圖

案例二

案例二 效果圖

散點圖

案例一

案例一效果圖

雷達圖

案例一

案例一效果圖

地圖

案例一效果圖

案例二效果圖

案例二效果圖