前言
數據可視化一直都是一個流行的話題。我們平時做項目可能就避免不了與圖圖表表打交道。所幸的是現在有許多優秀成熟的數據圖表庫，例如Echarts和Highcharts，我們可以在裏面尋找自己需要的圖表，方便快捷~
需求
假設我們有這樣一個需求：把統計到的全國客戶數據，利用可視化的方案展示出來。
針對這樣一個需求，一個比較好的方案就是把客戶數據展示在地圖上，這樣可以清晰直觀的瞭解到客戶在全國各地的分佈。本文的話就主要利用react+echarts來實現。
實操
當然，要想在react中使用echarts，就要先install一下
npm i echarts
echarts準備好了，現在就要找到我們的地圖文件，怎麼這麼說，因爲現在echarts官網不提供china.js的下載。怎麼辦？當然是面向搜索引擎編程，網上一搜就有。只要我們熟悉了echarts的配置項和API，實現想要的圖表還是比較快的。
接下來引入我們的文件並初始化我們的頁面：
import React, { Component } from 'react';
import '../china';
import echarts from 'echarts'
import './app.less';
export class App extends Component {
constructor(props) {
super(props);
this.state = {
data:[
]
}
}
componentDidMount(){
this.initMap();
}
//初始化地圖
initMap = () => {
let myChart = echarts.init(document.getElementById('myMap'));
let option = {
tooltip: {
formatter: function (e , t, n) {
return e.seriesName + "<br />" + e.name + "：" + e.value
}
},
visualMap: {
min: 0,
max: 1000,
right: 26,
bottom: 40,
showLabel: !0,
pieces: [{
gt: 500,
label: "500家以上",
color: "#ED5351"
}, {
gte: 200,
lte: 500,
label: "201-500家",
color: "#3B5A97"
}, {
gte: 100,
lt: 200,
label: "101-200家",
color: "#59D9A5"
}, {
gt: 51,
lte: 100,
label: "51-100家",
color: "#F6C021"
}, {
label: "1-50家",
gt: 0,
lte: 50,
color: "#6DCAEC"
}
],
show: !0
},
geo: {
map: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2
},
zoom: 1.13,
layoutCenter: ['30%', '30%'], //地圖中心在屏幕中的位置
label: {
normal: {
show: !0,
fontSize: "14",
color: "rgba(0,0,0,0.7)"
}
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#F5DEB3",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: [{
name: "客戶統計",
type: "map",
geoIndex: 0,
data: this.state.data,
areaColor: '#0FB8F0'
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
render(){
return (
<div className="map">
<div id="myMap"></div>
</div>
)
}
}
讓我們看看初步效果：
我們的全國地圖就出現了，然後我們再加上數據看看（數據純屬虛構）。
...
this.state = {
data:[
{
name: "南海諸島",
value: 0
},
{
name: '北京',
value: 20
},
{
name: '天津',
value: 30
},
{
name: '上海',
value: 229
},
{
name: '重慶',
value: 59
},
{
name: '河北',
value: 190
},
{
name: '河南',
value: 300
},
{
name: '雲南',
value: 20
},
{
name: '遼寧',
value: 40
},
{
name: '黑龍江',
value: 37
},
{
name: '湖南',
value: 180
},
{
name: '安徽',
value: 0
},
{
name: '山東',
value: 67
},
{
name: '新疆',
value: 10
},
{
name: '江蘇',
value: 0
},
{
name: '浙江',
value: 0
},
{
name: '江西',
value: 0
},
{
name: '湖北',
value: 0
},
{
name: '廣西',
value: 0
},
{
name: '甘肅',
value: 0
},
{
name: '山西',
value: 0
},
{
name: '內蒙古',
value: 89
},
{
name: '陝西',
value: 0
},
{
name: '吉林',
value: 0
},
{
name: '福建',
value: 66
},
{
name: '貴州',
value: 0
},
{
name: '廣東',
value: 330
},
{
name: '青海',
value: 0
},
{
name: '西藏',
value: 74
},
{
name: '四川',
value: 601
},
{
name: '寧夏',
value: 0
},
{
name: '海南',
value: 45
},
{
name: '臺灣',
value: 23
},
{
name: '香港',
value: 0
},
{
name: '澳門',
value: 0
}
]
}
...
上面的數據是手動添加的，一般在實際開發的時候，數據都是從後臺獲取的。
看看最終效果，還是不錯吧，圖中的各種效果基本上都能通過相關配置實現。
最後
其實我們在利用echarts做數據可視化相關項目的時候，主要是要搞懂其中大量的配置項。對於不同類型的圖表，我們也沒有必要去一行一行的配，echarts官網除了官方實例外，社區裏還有大佬們發的實例，可能找一找，就能找到我們想要或者類似的效果。