react+echarts实现全国客户数据展示

前言

数据可视化一直都是一个流行的话题。我们平时做项目可能就避免不了与图图表表打交道。所幸的是现在有许多优秀成熟的数据图表库，例如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: