本文作者鋼頭娃，轉(zhuǎn)載請備注

Echarts 快速入門

Echarts 介紹

ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
ECharts 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
2018年3月全球著名開源社區(qū)Apache宣布百度ECharts進(jìn)入Apache孵化器。

特性

豐富的可視化類型

多種數(shù)據(jù)格式無需轉(zhuǎn)換直接使用

千萬數(shù)據(jù)的前端展現(xiàn)

移動(dòng)端優(yōu)化

多渲染方案，跨平臺(tái)使用

動(dòng)態(tài)數(shù)據(jù)

絢麗的特效

安裝

獲取Echarts

最直接的方法是在ECharts的官方網(wǎng)址中挑選適合您的版本進(jìn)行下載，不同的打包下載應(yīng)用于不同的開發(fā)者功能與體積的需求，或者也可以直接下載完整版本;開發(fā)環(huán)境建議下載源代碼版本，這個(gè)里面包含了常見的錯(cuò)誤提示和警告

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

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

快速上手

通過標(biāo)簽方式直接引用構(gòu)建好的E charts文件

繪制一個(gè)簡單的圖表

在繪圖前我們需要為E charts準(zhǔn)備一個(gè)具備寬高的DOM容器，然后通過echarts.init方法初始化一個(gè)E charts實(shí)例并通過setOption方法生成一個(gè)簡單的柱狀圖，下面是完整代碼和效果圖

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定圖表的配置項(xiàng)和數(shù)據(jù)
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            grid:{
              top:'10%',
              right:'30%',
              bottom:'60%',
              left:'5%'
            },
            tooltip: {},
            legend: {
                data:['確診人數(shù)']
            },
            xAxis: {
                data: ["意大利","伊朗","西班牙","德國","瑞士","法國","美國","英國","韓國"]
            },
            yAxis: {},
            series: [{
                name: '確診人數(shù)',
                type: 'bar',
                data: [74386, 27017, 49515, 37323, 10897, 25233,69223,9529,9241]
            }]
        };
        // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

image

在webpack上使用E charts

通過 npm install echarts --save 命令安裝
通過 npm 上安裝的 ECharts 和 zrender 會(huì)放在node_modules目錄下?？梢灾苯釉陧?xiàng)目代碼中 require('echarts') 得到 ECharts。

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

注意：渲染順序

Option常用配置項(xiàng)

backgroundColor 背景色

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

// 線性漸變，前四個(gè)參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當(dāng)于在圖形包圍盒中的百分比，如果 globalCoord 為 true，則該四個(gè)值是絕對的像素位置
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
}
// 徑向漸變，前三個(gè)參數(shù)分別是圓心 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標(biāo)題組件

show: 是否顯示標(biāo)題組件，默認(rèn)值 true-boolean類型

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

link: 主標(biāo)題文本超鏈接-string類型

textStyle: 主標(biāo)題的樣式-Object類型

subtext: 副標(biāo)題文本，支持\n換行-string類型

legend圖例標(biāo)簽

show:是否顯示，默認(rèn)true

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

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

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

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

width: 組件的寬度，默認(rèn)'auto'

height:組件的高度,默認(rèn)'auto'

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

selected:圖例選中狀態(tài)表。

其他

dataset 數(shù)據(jù)集

source

grid網(wǎng)格標(biāo)簽

直角坐標(biāo)系內(nèi)繪圖網(wǎng)格，單個(gè) grid 內(nèi)最多可以放置上下兩個(gè) X 軸，左右兩個(gè) Y 軸。可以在網(wǎng)格上繪制折線圖，柱狀圖，散點(diǎn)圖（氣泡圖）。

show: 是否顯示直角坐標(biāo)系網(wǎng)格,默認(rèn)值false-boolean

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

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

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

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

width: 組件的寬度，默認(rèn)'auto'

height:組件的高度,默認(rèn)'auto'

其他

一個(gè)DOM中放入多個(gè)坐標(biāo)系

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

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

案例:

image

xAxis

show:是否顯示 x 軸,默認(rèn)true

position: x軸的位置，默認(rèn)borrom，也可以是top

name:坐標(biāo)軸名稱

nameLocation:坐標(biāo)軸名稱顯示位置，默認(rèn)值end；值的范圍是start/middle/center/end

其他

yAxis

show:是否顯示 y 軸,默認(rèn)true

position: y軸的位置，默認(rèn)left，也可以是right

name:坐標(biāo)軸名稱

nameLocation:坐標(biāo)軸名稱顯示位置，默認(rèn)值end；值的范圍是start/middle/center/end

tooltip提示框組件

show:是否顯示提示框組件，默認(rèn)值true

trigger:觸發(fā)類型，默認(rèn)值item-數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無類目軸的圖表中使用；也可以設(shè)置axis-坐標(biāo)軸觸發(fā)，主要在柱狀圖和折線圖等會(huì)使用類目軸的圖表中使用；none-什么都不觸發(fā)

showContent:是否顯示內(nèi)容，默認(rèn)true

toolbox工具欄組件

show：是否顯示工具欄組件，默認(rèn)顯示

orient:工具欄布局朝向，默認(rèn)horizontal橫向，vertical縱向

feature: 工具欄配置項(xiàng)

saveAsImage: 保存為圖片

restore: 配置項(xiàng)還原

dataView: 數(shù)據(jù)視圖工具

dataZoom: 數(shù)據(jù)縮放

magicType: 動(dòng)態(tài)類型切換，type:['line', 'bar', 'stack', 'tiled']

showTitle:鼠標(biāo)hover的時(shí)候是否顯示icon的標(biāo)題，默認(rèn)true

radar雷達(dá)坐標(biāo)系組件

center = ['50%','50%']圓心坐標(biāo)，第一項(xiàng)是橫坐標(biāo)，第二項(xiàng)是縱坐標(biāo)

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

name:雷達(dá)圖的名稱

shape:雷達(dá)圖繪制類型，默認(rèn)是多邊形polygon【polygon/circle】

axisLine:坐標(biāo)軸軸線相關(guān)設(shè)置

axisTick:坐標(biāo)軸刻度相關(guān)設(shè)置

axisLabel:坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置

dataZoom 區(qū)域縮放

dataZoom-inside:內(nèi)置型數(shù)據(jù)區(qū)域縮放組件

type:inside 默認(rèn)值

start:數(shù)據(jù)窗口范圍的起始百分比。范圍是：0 ~ 100。表示 0% ~ 100%。

end :數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0 ~ 100。

orient:布局方向【horizontal/vertical】

dataZoom-slider:滑動(dòng)條型數(shù)據(jù)區(qū)域縮放組件

type: slider 默認(rèn)值

backgroundColor 組件背景色

fillerColor 選中范圍的填充顏色

borderColor 邊框的顏色

start:數(shù)據(jù)窗口范圍的起始百分比。范圍是：0 ~ 100。表示 0% ~ 100%。

end :數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0 ~ 100。

orient:布局方向【horizontal/vertical】

geo 地理坐標(biāo)系組件

show: 是否顯示地理坐標(biāo)系組件

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

zoom: 當(dāng)前視角的縮放比例

nameMap:自定義地區(qū)的名稱

label: 圖形上的文本標(biāo)簽

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

center:當(dāng)前視角的中心點(diǎn)，用經(jīng)緯度表示

aspectScale: 長寬比例

visualMap數(shù)據(jù)展示類型

visualMap-piecewise:分段型

type: piecewise

splitNumber: 對于連續(xù)型數(shù)據(jù)，自動(dòng)平均分成幾段，默認(rèn)5段

pieces: 分段式視覺映射組件

min :最小值

max :最大值

lt :小于

gt :大于

gte :大于等于

lte :小于等于

注意:如果兩個(gè)piece的區(qū)間重疊，則會(huì)自動(dòng)進(jìn)行去重

其他

visualMap-continuous:連續(xù)型

type:continuous

min:最小值

max:最大值

range:指定手柄對應(yīng)數(shù)值的位置，range 應(yīng)在 min max 范圍內(nèi)，如果不設(shè)置，會(huì)自適應(yīng)，與最大值最小值一樣，例如max = 100,min=1,range = [1,100]

itemWidth : 圖型的寬度

itemHeight :圖形的高度

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

其他

series系列列表

series-line:折線/面積圖

type: 默認(rèn)值line

name: 系列名稱

coordinateSystem:該系列使用的坐標(biāo)系，默認(rèn)使用cartesian2d二維的直角坐標(biāo)系，polar是極坐標(biāo)系

clip:是否裁剪超出坐標(biāo)部分的圖形，除自定義系列默認(rèn)都為true

step:是否采用階梯線圖，默認(rèn)false，也支持設(shè)置成start/middle/end

lanel:圖形上的文本標(biāo)簽

show:是否顯示，默認(rèn)false

formatter:標(biāo)簽內(nèi)容格式

{a}：系列名

：數(shù)據(jù)名

{c}：數(shù)據(jù)值

data:數(shù)據(jù),數(shù)據(jù)個(gè)數(shù)與xAxis中的data個(gè)數(shù)數(shù)量一樣

series-bar:柱狀/條形圖

type:默認(rèn)值bar

name:系列名稱

coordinateSystem:默認(rèn)值'cartesian2d'，沒有其他值可以使用

label,data和series-line的一樣

series-pie:餅圖

type:默認(rèn)值pie

name:系列名稱

hoverAnimation: 是否開啟鼠標(biāo)在扇區(qū)hover的放大動(dòng)畫效果，默認(rèn)值true

roseType: 是否展示成南丁格爾圖，通過半徑區(qū)分?jǐn)?shù)據(jù)大小，值的范圍：

'radius'扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比，半徑展現(xiàn)數(shù)據(jù)的大小

'area' 所有扇區(qū)圓心角相同，僅通過半徑展現(xiàn)數(shù)據(jù)大小。

label:餅圖圖形上的標(biāo)簽

show :默認(rèn)值true

position: 標(biāo)簽的位置【outside/inside/inner/center】

formatter:標(biāo)簽內(nèi)容格式

{a}：系列名

：數(shù)據(jù)名

{c}：數(shù)據(jù)值

u0z1t8os: 百分比

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

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

emphasis:高亮的扇區(qū)和標(biāo)簽樣式。

center:餅圖的中心（圓心）坐標(biāo),數(shù)組的第一項(xiàng)是橫坐標(biāo)，第二項(xiàng)是縱坐標(biāo)。

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

data:系列中的數(shù)據(jù)內(nèi)容數(shù)組

series-scatter:散點(diǎn)圖

type:scatter 默認(rèn)值

name:系列名稱

symbol:標(biāo)記的圖形,默認(rèn)circle?！綾ircle/rect/roundRect/triangle/diamond/pin/arrow/none】

symbolSize:標(biāo)記的大小

label:圖形上的文本標(biāo)簽

show：是否顯示標(biāo)簽

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

series-radar:雷達(dá)圖

type:radar 默認(rèn)值

name: 系列名稱

symbol:標(biāo)記的圖形,默認(rèn)circle?！綾ircle/rect/roundRect/triangle/diamond/pin/arrow/none】

series-map:地圖

markPoint:圖表標(biāo)注

markLine:圖表標(biāo)線

常用api

init 創(chuàng)建一個(gè)Echarts實(shí)例，返回echartsInstance，不能在單個(gè)容器上初始化多個(gè)Echarts實(shí)例

參數(shù)：dom實(shí)例容器，一般是一個(gè)具有高寬的div元素

參數(shù)：theme 應(yīng)用的主題

附加參數(shù)：opts

devicePixelRatio：設(shè)備像素比

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

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

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

setOption 設(shè)置圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù)，萬能接口，所有參數(shù)和數(shù)據(jù)的修改都可以通過 setOption 完成，ECharts 會(huì)合并新的參數(shù)和數(shù)據(jù)，然后刷新圖表。

getWidth 獲取容器的寬度

getHeight 獲取容器的高度

getDom 獲取 ECharts 實(shí)例容器的 dom 節(jié)點(diǎn)。

getOption 獲取當(dāng)前實(shí)例中維護(hù)的 option 對象

resize 改變圖表尺寸，在容器大小發(fā)生改變時(shí)需要手動(dòng)調(diào)用。

參數(shù)：opts

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

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

on 綁定事件處理函數(shù)

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

參數(shù) query：可選的過濾條件，能夠只在指定的組件或者元素上進(jìn)行響應(yīng)。

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

參數(shù) context:可選，回調(diào)函數(shù)內(nèi)部的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:顯示動(dòng)畫加載效果

hideLoading:隱藏動(dòng)畫加載效果

getDataURL:導(dǎo)出圖表圖片，返回一個(gè) base64 的 URL，可以設(shè)置為Image的src。

clear：清空當(dāng)前實(shí)例

異步數(shù)據(jù)加載

loading動(dòng)畫

如果數(shù)據(jù)加載時(shí)間較長，一個(gè)空的坐標(biāo)軸放在畫布上也會(huì)讓用戶覺得是不是產(chǎn)生 bug 了，因此需要一個(gè) loading 的動(dòng)畫來提示用戶數(shù)據(jù)正在加載。
ECharts 默認(rèn)有提供了一個(gè)簡單的加載動(dòng)畫。只需要調(diào)用 showLoading 方法顯示。數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法隱藏加載動(dòng)畫。

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: '異步數(shù)據(jù)加載示例'
    },
    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: [{
            // 根據(jù)名字對應(yīng)到相應(yīng)的系列
            name: '銷量',
            data: data.data
        }]
    });
});

案例效果

image

經(jīng)典使用案例

折線圖

案例一

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

案例一效果圖

image

案例二

 option = {
        legend: {
            orient :'horizontal',//默認(rèn)是橫向排列，也可以是豎向'vertical'
            left:'center',//可以是方位詞
            top:'10%'//也可以是數(shù)值和百分比
        },//標(biāo)注系列的名稱和顏色
        tooltip: {//提示框
            trigger: 'axis',//坐標(biāo)觸發(fā)，還可以是item，只顯示一個(gè)數(shù)據(jù)
            showContent: true//提示框顯示
        },
        toolbox:{
            top:'10%',
            right:'10%',
            feature:{
                dataView: {readOnly: false},//是否只讀
                magicType: {type: ['line', 'bar']},//切換的圖形
                restore: {},//數(shù)據(jù)還原
                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%',//...右側(cè)
            bottom:'10%',//底部
            left:'10%'//左側(cè)
        },
        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'},
        ]
    };

案例二效果圖

image

柱狀圖

案例一

option = {
    title: {
        left:'center',
        top:'3%',
        text: '某地區(qū)蒸發(fā)量和降水量',
        subtext: '純屬虛構(gòu)'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['蒸發(fā)量', '降水量'],
        top:'10%'
    },
    toolbox: {
        show: true,
        top:'10%',
        feature: {
            dataView: {show: true, readOnly: false},//數(shù)據(jù)視圖
            magicType: {show: true, type: ['line', 'bar']},//切換數(shù)據(jù)圖類型
            restore: {show: true},//刷新數(shù)據(jù)
            saveAsImage: {show: true}//保存圖片
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',//數(shù)據(jù)類型，類目
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value'//可以不寫，默認(rèn)value
        }
    ],
    grid: {
            top: '20%',//距離dom容器頂部
            right:'10%',//...右側(cè)
            bottom:'10%',//底部
            left:'10%'//左側(cè)
        },
    series: [
        {
            name: '蒸發(fā)量',
            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: '平均值'}
                ]
            }
        }
    ]
};

案例一效果圖

image

案例二

option = {
    backgroundColor:'#323a5e',//背景色
    tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
            type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
          }
        },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '20%',
        top:'20%',
        containLabel: true//是否包含刻度尺，默認(rèn)不包含
    },
    legend:{//圖例組件
          data: ['累計(jì)確診', '治愈數(shù)', '死亡數(shù)'],//這里的data值要和series里每一組數(shù)據(jù)的name相同
          right: 'center',
          top:'10%',
          textStyle: {
            color: "#fff"
          },
          itemWidth: 12,//圖例組件寬度
          itemHeight: 10,//圖例組件高度
        itemGap: 35//每項(xiàng)之間的間隔
    },
    xAxis:{
          type: 'category',
          data: ['美國','意大利','西班牙','德國','法國','伊朗','葡萄牙','以色列'],
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
        },
    yAxis:{
        type: 'value',
        max:'20000',//縱坐標(biāo)軸的最大刻度
        axisLine: {
            show: false,//不顯示縱坐標(biāo)軸
            lineStyle: {
              color: 'white'
            }
          },
        splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
        axisLabel: {}
    },
    series: [
        {
          name: '累計(jì)確診',
          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: '治愈數(shù)',
          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: '死亡數(shù)',
          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: [//滑動(dòng)組件
            {
            type:"slider",//水平滑塊，選擇區(qū)間
            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",//縱向滑動(dòng),縮放
          show: true,
          height: 15,
          start: 1,
          end: 35
        }
    ],
};

案例二效果圖

image

餅圖

案例一

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>: {c}例 (u0z1t8os%)'//提示框顯示內(nèi)容的格式【{a}:系列名/:數(shù)據(jù)名/{c}:數(shù)據(jù)值/u0z1t8os:百分比】
    },
    legend: {
        orient: 'horizontal',//圖例方向【'horizontal'\'vertical'】
        left: 'center',
        top:'10%',
        data: ['美國', '意大利', '西班牙', '德國', '法國','伊朗','英國','瑞士','比利時(shí)','荷蘭','土耳其','韓國']
    },
    series: [
        {
            name: '新冠疫情數(shù)據(jù)圖',
            type: 'pie',
            radius: ['0%', '40%'],//范圍0-100
            center: ['50%', '50%'],
            label: {
                show: false,
                position: 'outside'//標(biāo)簽的位置【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: '比利時(shí)'},
                {value: 11750, name: '荷蘭'},
                {value: 10827, name: '土耳其'},
                {value: 9786, name: '法國'},
            ]
        },
    ]
};

案例一效果圖

image

案例二

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:'比利時(shí)',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: '人民日報(bào)式海外疫情玫瑰圖',
        subtext: '\n使用2020-03-27數(shù)據(jù)',
        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\數(shù)字】
        y: '350',//垂直位置，【top\center\bottom\數(shù)字】
        align:'left',//字在圖例的左邊或右邊【left/right】
        orient:'vertical',//圖例方向【horizontal/vertical】
        icon: "circle",   //圖例形狀【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
        textStyle://圖例文字
        {
            fontFamily:'微軟雅黑',
            color:'#000',
        },
        data: ['美國','意大利','西班牙','德國','法國','伊朗','英國','瑞士','韓國','荷蘭','','奧地利','比利時(shí)','加拿大','土耳其','葡萄牙','挪威','澳大利亞','巴西','瑞典'],
        formatter: function(params)  {
            console.log('圖例參數(shù)',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'//標(biāo)簽的位置【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:'比利時(shí)',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:''}
            ]
        }
            ] 
};

案例二效果圖

image

散點(diǎn)圖

案例一

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: '散點(diǎn)圖案例',
        left: 'center',
        top: 0
    },
    grid: {
    },
    tooltip: {
        formatter: '坐標(biāo) ({c})'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {},
    series: [
        {
            name: 'I',
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: dataAll,
        }
    ]
};

案例一效果圖

image

雷達(dá)圖

案例一

option = {
    backgroundColor: '#101736',
    color: ['#4A99FF', '#4BFFFC'], //顏色,
    legend: {
        orient: 'vertical',
        icon: 'circle', //圖例形狀
        data: ['車輛數(shù)', '設(shè)計(jì)車位'], //圖例,
        bottom: 35,
        right: 40,
        itemWidth: 14, // 圖例標(biāo)記的圖形寬度。[ default: 25 ]
        itemHeight: 14, // 圖例標(biāo)記的圖形高度。[ default: 14 ]
        itemGap: 21, // 圖例每項(xiàng)之間的間隔。[ default: 10 ]橫向布局時(shí)為水平間隔，縱向布局時(shí)為縱向間隔。
        textStyle: {
            fontSize: 14,
            color: '#00E4FF',
        },
    },
    radar: {
        shape: 'polygon', //雷達(dá)繪制類型，默認(rèn)多邊形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: { // 坐標(biāo)軸在 grid 區(qū)域中的分隔區(qū)域，默認(rèn)不顯示。
            show: true,
            areaStyle: { // 分隔區(qū)域的樣式設(shè)置。
                color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔區(qū)域顏色。分隔區(qū)域會(huì)按數(shù)組中顏色的順序依次循環(huán)設(shè)置顏色。默認(rèn)是一個(gè)深淺的間隔色。
            }
        },
        axisLine: { //指向外圈文本的分隔線樣式
            //show:false,//默認(rèn)true
            lineStyle: {
                color: '#153269'
            }
        },
        splitLine: { //分割線
            //show:false,//默認(rèn)顯示
            lineStyle: {
                color: '#113865', // 分隔線顏色
                width: 1, // 分隔線線寬
            }
        },
    },
    series: [{
        name: '車輛數(shù)',
        type: 'radar',
        symbolSize: 5, //坐標(biāo)軸上的點(diǎn)的大小
        symbol: 'angle', //點(diǎn)的樣式，默認(rèn)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 // 區(qū)域透明度
                }
            },
            {
                name: '設(shè)計(jì)車位',
                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 // 區(qū)域透明度
                }
            }
        ]
    }]
};

案例一效果圖

image

地圖

案例一

//數(shù)據(jù)
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: '內(nèi)蒙古',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: '臺(tái)灣',value: 3},
    {name: '香港',value: 5},
    {name: '澳門',value: 5}
];
option = {
    title:{
        text:'早期新型冠狀病毒感染分布圖',//大標(biāo)題
        subtext:"數(shù)據(jù)來自2020-01-25日"http://副標(biāo)題
    },
    tooltip: {//提示框
        triggerOn: "mousemove",//提示框觸發(fā)【mousemove/click/mousemove|click/none】
    },
    visualMap: {
        type:'piecewise',//數(shù)據(jù)展示類型默認(rèn)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//可以不寫，默認(rèn)是顯示
    },
    geo: {
        map: "china",
        roam: false,//是否開啟鼠標(biāo)縮放和平移漫游，默認(rèn)不開起【scale/move/false/true】
        scaleLimit: {
            min: 1,
            max: 2
        },
        zoom: 1.0,//當(dāng)前視角縮放比例
        top: 120,
        label: {
            normal: {
                show: !0,
                fontSize: "14",
                color: "rgba(0,0,0,0.7)"
            }
        },
        itemStyle: {
            normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"http://邊框顏色
            },
            emphasis: {
                areaColor: "#f2d5ad",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0
            }
        }
    },
    series: [{
        name: "確診病例",
        type: "map",
        map:"china",//可以不寫
        geoIndex: 0,
        data: window.dataList
    }]
};

案例一效果圖

image

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Echarts快速入門

Echarts 快速入門

Echarts 介紹

特性

安裝

獲取Echarts

快速上手

繪制一個(gè)簡單的圖表

在webpack上使用E charts

Option常用配置項(xiàng)

backgroundColor 背景色

title標(biāo)題組件

legend圖例標(biāo)簽

dataset 數(shù)據(jù)集

grid網(wǎng)格標(biāo)簽

一個(gè)DOM中放入多個(gè)坐標(biāo)系

xAxis

yAxis

tooltip提示框組件

toolbox工具欄組件

radar雷達(dá)坐標(biāo)系組件

dataZoom 區(qū)域縮放

geo 地理坐標(biāo)系組件

visualMap數(shù)據(jù)展示類型

series系列列表

常用api

異步數(shù)據(jù)加載

loading動(dòng)畫

使用loading案例

案例效果

經(jīng)典使用案例

折線圖

案例一

案例一效果圖

案例二效果圖

柱狀圖

案例一

案例一效果圖

案例二

案例二 效果圖

餅圖

案例一

案例一效果圖

案例二

案例二 效果圖

散點(diǎn)圖

案例一

案例一效果圖

雷達(dá)圖

案例一

案例一效果圖

地圖

案例一效果圖

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

案例二效果圖

案例二效果圖