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

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=https://www.cnblogs.com/taixiang/p/"echarts.min.js"></script>

<body>
    
    
    <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 = https://www.cnblogs.com/taixiang/p/[
{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
    }]
};

案例一效果圖

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/49964.html

標籤：Html/Css

上一篇：HTML連載81-CSS書寫格式、一個手機頁面的基本結構

下一篇：3.使用float實作文字環繞圖片

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案例

案例效果

經典使用案例

折線圖

案例一

案例一效果圖

案例二效果圖

柱狀圖

案例一

案例一效果圖

案例二

案例二 效果圖

餅圖

案例一

案例一效果圖

案例二

案例二 效果圖

散點圖

案例一

案例一效果圖

雷達圖

案例一

案例一效果圖

地圖

案例一效果圖

案例二效果圖

案例二效果圖