echarts解決一些大屏圖形配置方案彙總

時間  2019-11-09
標籤 echarts 解決 一些 圖形 配置 方案 彙總 简体版
原文   原文鏈接

本文主要記錄使用echarts解決各類大屏圖形配置方案。數組

一、說在前面

去年常常使用echarts解決一些可視化大屏項目，一直想記錄下使用經驗，便於往後快速實現。正好最近在整理文檔，順道一塊兒記錄在博客中。echarts

二、基本使用

Echarts3.0是經過配置實現圖形的，根據不一樣的配置或者組合配置生成想要的圖形。後面主要介紹options中的配置內容。dom

setOption

// dom表示對應的dom節點，必須指定寬高
var ec = echart.init(dom);

// 根據配置初始化圖形，其中options就是配置核心
ec.setOption(options)

tooltip

用於顯示提示框函數

名稱 效果
trigger 觸發類型：item表示數據項，axis表示座標軸觸發（柱狀圖/折線圖用的多）
formatter 提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。 
tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
},

  • 折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）動畫

  • 散點圖（氣泡）圖 : {a}（系列名稱），{b}（數據名稱），{c}（數值數組）, {d}（無）3d

  • 地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合併數值）, {d}（無）指針

  • 餅圖、儀表盤、漏斗圖: {a}（系列名稱），{b}（數據項名稱），{c}（數值）, {d}（百分比）code

legend

用於顯示圖例。orm

legend: {
    data: data,
    itemGap: 0,
    itemWidth: 15,
    itemHeight: 10,
    bottom: -5,
    left: 30,
    width: '500px',
    textStyle: {
        color: "#fff",
        fontSize: 14
    }
},

axis

用於顯示座標。blog

名稱 效果
type 座標軸類型：'value' 數值軸，適用於連續數據。'category' 類目軸，適用於離散的類目數據，爲該類型時必須經過 data 設置類目數據
boundaryGap 座標軸兩邊留白策略
splitNumber 座標軸的分割段數
axisLine 座標軸軸線相關設置
axisTick 座標軸刻度相關設置
axisLabel 座標軸文本相關設置 
//縱座標設置類似
xAxis: [{
    type: 'category',
    boundaryGap: false,
    splitNumber: 5,
    data: xAxis,
    axisLine: {
        show: false
    },
    axisTick: {
        show: false
    },
    axisLabel: {
        show: true,
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    }
}]

更多基礎使用，詳見官網配置項文檔

三、圖形配置

餅圖疊加

餅圖是echart的自帶的圖形，這裏只要把顏色設置一下就能夠了。難點在於在圖上再覆蓋一個半透明的圓環，圓環是不能夠有hover效果的。

名稱 效果
name 圖標名稱
type 指明圖形的類型'pie','line'等
hoverAnimation 鼠標hover是否須要動畫
radius 餅圖的半徑，數組的第一項是內半徑，第二項是外半徑
center 餅圖的中心（圓心）座標，數組的第一項是橫座標，第二項是縱座標。
label 餅圖圖形上的文本標籤，可用於說明圖形的一些數據信息
labelLine 標籤的視覺引導線樣式
data 渲染數據 
series: [{
            name: '主要致貧緣由',
            type: 'pie',
            hoverAnimation: false,
            radius: [10, radiusMax],
            center: ['50%', '50%'],
            label: {
                normal: {
                    formatter: "{b} {d}%",
                    color: '#fff',
                    fontSize: 14
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: '#fff',
                        opacity: 0.5
                    },
                    length: 1
                }
            },
            data: data
        },
        {
            type: 'pie',
            radius: [10, 18],
            hoverAnimation: false,
            center: ['50%', '50%'],
            cursor: 'text',
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{            
                //透明圓
                value: 100,
                itemStyle: {
                    normal: {
                        color: '#000',
                        opacity: 0.3
                    }
                }
            }]
        }
    ]

漸變折線

折線圖是echart的自帶的圖形，這裏的難點在於漸變色的設置

名稱 效果
itemStyle 圖形樣式（3.0內部必須加入normal）
areaStyle 區域填充樣式。 
var option = {  
    //僅列舉一個，其餘2個相似  
    series: [{
            name: type === '訪問用戶數(人)',
            type: 'line',
            itemStyle: {
                normal: {
                    color: "#cefe56",
                    borderWidth: 2,
                    areaStyle: {
                        //漸變色的設置
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#cefe56'
                            }, {
                                offset: 0.5,
                                color: '#6d703d'
                            }, {
                                offset: 1,
                                color: '#4d513a'
                            }]
                        )
                    },
                    lineStyle: {
                        color: "#cefe56",
                        width: 2
                    }
                }
            },
            data: data
        }
    ]
}

疊加刻度線（儀表盤）

圖示的圖形在echarts中是沒有原型的，因爲是顯示的刻度，所以能夠考慮使用type:'gauge' （即儀表盤）來實現，而後隱藏全部只顯示儀表盤分割線；經過分析可知該圖形是由2個刻度圓形組成，藍色刻度表示背景，綠色刻度表示具體的佔比，總比100%。

名稱 效果
radius 儀表盤半徑
startAngle 儀表盤起始角度
endAngle 儀表盤結束角度
clockwise 儀表盤刻度是不是順時針增加
min 最小的數據值
max 最大的數據值
axisTick 刻度樣式
splitNumber 儀表盤刻度的分割段數
splitLine 儀表盤分割線樣式
axisLine 儀表盤軸線相關配置
pointer 儀表盤指針
detail 儀表盤詳情 
series: [
    {
        //綠色刻度，藍色刻度precent值是1
        name: '脫貧人數佔比',
        type: 'gauge',
        animation: true,
        radius: '80%',
        startAngle: 359.99 * precent / 100,
        endAngle: 0,
        clockwise: false,
        min: 0,
        max: 100,
        axisTick: { 
            show: false
        },
        axisLabel: {
            show: false,
        },
        splitNumber: 30 * precent / 100,
        splitLine: {
            show: true,
            length: 7,
            lineStyle: {
                color: '#30c3a7',
                width: 2
            },
        },
        axisLine: {
            show: false,
            lineStyle: {
                width: 0,
                opacity: 0
            }
        },
        pointer: {
            show: false
        },
        detail: {
            color: '#32cfaf',
            formatter: '{value}%',
            fontSize: 14,
            offsetCenter: ['0%', '-20%']
        },
        title: {
            show: true,
            color: "#fff",
            fontSize: 14,
            offsetCenter: ['0%', '20%']
        },
        data: [{ value: precent, name: '佔比' }],
    }
]

刻度柱狀圖

圖示的圖形在echarts中是沒有原型的，其實它提供了另一個類型：象形柱圖，這裏能夠經過與柱狀圖的結合疊加組合成效果圖。即便用柱狀圖（type:bar）實現帶漸變的柱狀圖，使用象形柱圖（type:pictorialBar）實現中間的間隔，間隔的顏色與背景色相同，形成中間柱狀圖「缺失」的假象。

名稱 效果
barWidth 柱狀圖顯示寬度
itemStyle 柱狀圖樣式
symbol 圖形類型提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'，也能夠自定義指定圖片
symbolSize 圖形的大小
symbolMargin 圖形的兩邊間隔
symbolRepeat 指定圖形元素是否重複 
series: [{
    name: '貧困戶人均純收入',
    type: 'bar',
    barWidth: '15',
    itemStyle: {
        normal: {
            //柱狀圖漸變
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [
                    { offset: 0, color: '#55c8fe' },
                    { offset: 0.3, color: '#4dbcf6' },
                    { offset: 0.5, color: '#3ca3e6' },
                    { offset: 0.7, color: '#3193db' },
                    { offset: 1, color: '#2683d0' }
                ]
            ),
            //刻度顯示在頂部
            label: {
                show: true,
                color: '#fff',
                position: 'top'
            }
        },
    },
    data: data
}, {
    type: 'pictorialBar',
    symbol: 'rect', 
    symbolSize: [15, 2],
    symbolMargin: 2,
    symbolRepeat: true,
    itemStyle: {
        normal: {
            color: '#101634'
        }
    },
    tooltip: {
        show: false
    },
    data: data
}]
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程