前言
数据可视化一直都是一个流行的话题。我们平时做项目可能就避免不了与图图表表打交道。所幸的是现在有许多优秀成熟的数据图表库，例如Echarts和Highcharts，我们可以在里面寻找自己需要的图表，方便快捷~
需求
假设我们有这样一个需求：把统计到的全国客户数据，利用可视化的方案展示出来。
针对这样一个需求，一个比较好的方案就是把客户数据展示在地图上，这样可以清晰直观的了解到客户在全国各地的分布。本文的话就主要利用react+echarts来实现。
实操
当然，要想在react中使用echarts，就要先install一下
npm i echartsecharts准备好了，现在就要找到我们的地图文件，怎么这么说，因为现在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 + "
" + 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 (
)
}
}让我们看看初步效果：
我们的全国地图就出现了，然后我们再加上数据看看（数据纯属虚构）。
...
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官网除了官方实例外，社区里还有大佬们发的实例，可能找一找，就能找到我们想要或者类似的效果。