java报表技术-图形报表

目录

JFreechart

简介

入门案例

Highcharts

简介

下载安装

入门案例

准备页面

统计各部门人数（柱状图）

月份入职人数统计（折线图）

员工地方来源统计（可下钻的饼状图）

Echarts

简介

下载安装

入门案例

准备页面

统计各部门人数（柱状图）

月份入职人数统计

员工地方来源统计（饼图）

员工地方来源统计（中国地图）

---

图表报表简介

大数据时代，需要对大量的数据进行分析，帮助用户或领导更直观的擦绝差异，在web项目中除了表格显示数据外，还可以通过图标来表现数据，这种图标形式表现数据使人看的清楚明白且更加直观。对于web项目展示图形报表使用最多的技术就是基于js的前端报表框架，目前前端市场使用最多的图形报表框架有：JfreeChart、ECharts、HighCharts、Highcharts、FusionCharts、amCharts等

JFreechart

简介

java平台上的一个开放的图标绘制类库。完全使用java编写，可生成饼图、柱状图、散点图、时许图、甘特图等等多种图表，并且可以产生png和jpeg格式的输出，还可以与pdf或excel关联

入门案例

所需依赖

<dependency>
    <groupId>org.jfree</groupId>
    <artifactId>jfreechart</artifactId>
    <version>1.5.0</version>
</dependency>

饼图&3D饼图

public class JfreeChartsDemo01 {
    public static void main(String[] args) throws IOException {
        //构建饼图的数据集
        DefaultPieDataset dataset=new DefaultPieDataset();
        dataset.setValue("销售部", 120);
        dataset.setValue("人事部", 50);
        dataset.setValue("技术部", 180);
​
        StandardChartTheme standardChartTheme=new StandardChartTheme("CN");
        //设置标题字体
        standardChartTheme.setExtraLargeFont(new Font("华文宋体",Font.BOLD,20));
        //设置图例的字体
        standardChartTheme.setRegularFont(new Font("华文宋体", Font.BOLD,15));
        //设置轴向的字体
        standardChartTheme.setLargeFont(new Font("华文宋体",Font.BOLD,15));
        //应用主题样式
        ChartFactory.setChartTheme(standardChartTheme);
//参数1  title 标题
//参数2　dataset 数据集
//参数3   是否开启图例
//参数4   是否开启工具栏
//参数5  是否开启url跳转
//        JFreeChart chart= ChartFactory.createPieChart("各部门人数", dataset, true, false, false);
​
        JFreeChart chart= ChartFactory.createPieChart3D("各部门人数", dataset, true, false, false);
//生成一张图表的图片文件到d盘
        ChartUtils.saveChartAsPNG(new File("d:\\chart1.png"), chart, 400, 300);
    }
​
}

效果图

折线图

public class JfreeChartsDemo2 {
​
    public static void main(String[] args) throws Exception {
//构建饼图的数据集
        DefaultCategoryDataset dataset=new DefaultCategoryDataset();
        dataset.addValue(15,"技术部","2011");
        dataset.addValue(11,"技术部","2012");
        dataset.addValue(10,"技术部","2013");
        dataset.addValue(16,"技术部","2014");
​
        dataset.addValue(10,"销售部","2011");
        dataset.addValue(30,"销售部","2012");
        dataset.addValue(6,"销售部","2013");
        dataset.addValue(16,"销售部","2014");
​
        dataset.addValue(10,"产品部","2011");
        dataset.addValue(20,"产品部","2012");
        dataset.addValue(30,"产品部","2013");
        dataset.addValue(15,"产品部","2014");
        StandardChartTheme standardChartTheme=new StandardChartTheme("CN");
        //设置标题字体
        standardChartTheme.setExtraLargeFont(new Font("华文宋体",Font.BOLD,20));
        //设置图例的字体
        standardChartTheme.setRegularFont(new Font("华文宋体", Font.PLAIN,15));
        //设置轴向的字体
        standardChartTheme.setLargeFont(new Font("华文宋体",Font.PLAIN,15));
        //应用主题样式
        ChartFactory.setChartTheme(standardChartTheme);
//参数1  title 标题
//参数2　x轴的说明
//参数3   Y轴的说明
//参数4   数据集
        JFreeChart chart= ChartFactory.createLineChart("入职人数", "年度", "人数", dataset);
//生成一张图表的图片文件
        ChartUtils.saveChartAsPNG(new File("d:\\chart2.png"), chart, 400, 300);
    }
}

效果图：

柱形图（条形图）

public class JfreeChartsDemo3 {
​
    public static void main(String[] args) throws Exception {
//构建饼图的数据集
        DefaultCategoryDataset dataset=new DefaultCategoryDataset();
        dataset.addValue(15,"技术部","2011");
        dataset.addValue(11,"技术部","2012");
        dataset.addValue(10,"技术部","2013");
        dataset.addValue(16,"技术部","2014");
​
        dataset.addValue(10,"销售部","2011");
        dataset.addValue(30,"销售部","2012");
        dataset.addValue(6,"销售部","2013");
        dataset.addValue(16,"销售部","2014");
​
        dataset.addValue(10,"产品部","2011");
        dataset.addValue(20,"产品部","2012");
        dataset.addValue(30,"产品部","2013");
        dataset.addValue(15,"产品部","2014");
​
        StandardChartTheme standardChartTheme=new StandardChartTheme("CN");
        //设置标题字体
        standardChartTheme.setExtraLargeFont(new Font("华文宋体",Font.BOLD,20));
        //设置图例的字体
        standardChartTheme.setRegularFont(new Font("华文宋体", Font.PLAIN,15));
        //设置轴向的字体
        standardChartTheme.setLargeFont(new Font("华文宋体",Font.PLAIN,15));
        //应用主题样式
        ChartFactory.setChartTheme(standardChartTheme);
//参数1  title 标题
//参数2　x轴的说明
//参数3   Y轴的说明
//参数4   数据集
        JFreeChart chart= ChartFactory.createBarChart("入职人数", "年度", "人数", dataset);
//生成一张图表的图片文件
        ChartUtils.saveChartAsPNG(new File("d:\\chart3.png"), chart, 400, 300);
    }
}

效果图

Highcharts

简介

Highcharts是一个用纯js编写的一个图标库，能够很简单便携的在web网络或者web应用程序添加有交互性的图标，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散装点图和综合图标

下载安装

到Highcharts官方网站下载

下载完成后解压

将js文件放入项目中

入门案例

第一步：创建一个html demo.html

第二步：页面中引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/highcharts.js"></script>
</head>
<body>
​
</body>
</html>

第三步：准备一个dom

<body>
<div id="container" style="width: 600px;height:400px;"></div>
</body>

第四步：js代码

<script>
        // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>

结果：

属性解释：
（1）chart ：图表基本属性
    a)  plotBackgroundColor  区域背景颜色
    b)  plotBorderWidth  区域边框宽度
    c)  plotShadow  区域阴影
    d)  type  图表类型
（2）title ：图表标题
    a)  text 标题文本
（3）tooltip ：工具提示
    a)  pointFormat  工具提示显示格式
（4）plotOptions：区域选项
    a)  allowPointSelect  点击区域后选择
    b)  cursor  光标类型
    c)  dataLabels  数据标签
    d)  showInLegend  是否显示图例
（5）series： 数据组
    a)  name  名称
    b)  colorByPoint  点的颜色
    c)  data  数据

准备页面

在static目录下创建页面highcharts_index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui" />
    <title>highcharts图表报表</title>
    <link rel="stylesheet" href="css/charts_demo.css">
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/highcharts.js"></script>
    <script src="js/highcharts-3d.js"></script>
    <script src="js/highcharts-more.js"></script>
    <script src="js/drilldown.js"></script>


</head>
<body>
<div id="app" class="my-box">
    <div class="my-box-left">
        <button @click="columnCharts">统计各部门人数</button> <br/> <br/>
        <button @click="lineCharts">月份入职人数统计</button> <br/> <br/>
        <button @click="pieCharts">员工地方来源统计</button> <br/> <br/>
    </div>
    <div class="my-box-right">
        <div id="container" style="height:450px;"></div>
    </div>
</div>
</body>
<script>
 new Vue({
     el:"#app",
     data:{},
     methods: {
         columnCharts() {

         },
         lineCharts(){

         },
         pieCharts(){

         }
     }
});
</script>
</html>

统计各部门人数（柱状图）

第一步：sql语句：用户表和部门表关联查询，根据部门名称分组统计

select dept_name deptName,count(u.id) num from tb_dept d LEFT JOIN tb_user u on  d.id=u.dept_id GROUP BY dept_name

第二步：后台代码

1、创建StatController

@RestController
@RequestMapping("/stat")
public class StatController {
    @Autowired
    private StatService statService;
    @GetMapping(value = "/columnCharts",name = "统计各部门人数，柱状图")
    public List<Map> columnCharts(){
        return  statService.columnCharts();
    }
}

2、创建StatService

@Service
public class StatService {

    @Autowired
    private UserMapper userMapper;

    public List<Map> columnCharts() {
        return userMapper.columnCharts();
    }
}

3、UserMapper

@Select(value = "select dept_name deptName,count(u.id) num from tb_dept d LEFT JOIN tb_user u on  d.id=u.dept_id GROUP BY dept_name")

List<Map> columnCharts();

第三步：完成js方法

 methods: {
         columnCharts() {
             axios.get("/stat/columnCharts").then(res => {
                 let datas = res.data;
                 let titles=[];  //x轴上显示的数据
                 let values=[]; //y轴上显示的数据
                 for (let i = 0; i < datas.length; i++) {
                     titles[i] = datas[i].deptName;
                     values[i] = datas[i].num;
                 }
                 Highcharts.chart('container', {
                     chart: {
                         type: 'column'
                     },
                     title: {
                         text: '各部门人数'
                     },
                     xAxis: {
                         categories:titles,
                         crosshair: true
                     },
                     yAxis: {
                         min: 0,
                         title: {
                             text: '人数'
                         }
                     },
                     tooltip: {
                         // head + 每个 point + footer 拼接成完整的 table
                         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                             '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                         footerFormat: '</table>',
                         shared: true,
                         useHTML: true
                     },
                     plotOptions: {
                         column: {
                             borderWidth: 0
                         }
                     },
                     series: [{
                         name: '各部门人数',
                         data: values
                     }]
                 });


             })
         },
         pieCharts(){},
         lineCharts(){}
     }

效果

月份入职人数统计（折线图）

第一步：sql语句

select m.name,IFNULL(t.num,0) num from tb_month m LEFT JOIN (
select DATE_FORMAT(hire_date,'%m') months ,count(id) num from tb_user GROUP BY DATE_FORMAT(hire_date,'%m')
) t ON m.name=t.months

第二步：后台代码

1、StatController添加方法

@GetMapping(value = "/lineCharts",name = "月份入职人数统计，折线图")
public List<Map> lineCharts(){
    return  statService.lineCharts();
}

2、StatService添加方法

public List<Map> lineCharts() {
    return userMapper.lineCharts();
}

3、UserMapper添加方法

@Select("select m.name,IFNULL(t.num,0) num from tb_month m LEFT JOIN ( " +
        "select DATE_FORMAT(hire_date,'%m') months ,count(id) num from tb_user GROUP BY DATE_FORMAT(hire_date,'%m') " +
        ") t ON m.name=t.months")
List<Map> lineCharts();

第三步：完成js代码

lineCharts(){
    axios.get("/stat/lineCharts").then(res=>{
        let datas = res.data;
        let values=[]; //y轴上显示的数据
        for (let i = 0; i < datas.length; i++) {
            values[i] = datas[i].num;
        }
        var chart = Highcharts.chart('container', {
            title: {
                text: '月份入职人数统计'
            },
            yAxis: {
                title: {
                    text: '入职人数'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },
            series: [{
                name: '入职人数',
                data: values
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });

    })
}

员工地方来源统计（可下钻的饼状图）

统计公司员工的来源

第一步：环境准备

如果想要下钻，需要多引入一个js，从下载的压缩包中找到后放入项目中，并且在html中引入

<script src="js/drilldown.js"></script>

第二步：后台代码

1、StatController代码添加方法

@GetMapping(value = "/pieCharts",name = "公司员工地方来源，包括省、市")
public List<Map> pieCharts(){
    return  statService.pieCharts();
}

2、StatService中添加方法

这个方法直接返回js上需要的所有数据

数据格式： [{id:"河北省","drilldown":"河北省","name":"河北省","y":10,"data":[{"name":"石家庄","y":4},{"name":"唐山","y":3},{"name":"保定","y":3}]}]

public List<Map> pieCharts() {
        List<Map> resultMapList = new ArrayList();
        List<User> userList = userMapper.selectAll(); //查询所有员工数据
//        根据省份分组
        Map<String, List<User>> provinceMap = userList.stream().collect(Collectors.groupingBy(User::getProvince));
        for (String provinceName : provinceMap.keySet()) {
            int provinceSize = 0;
            Map resultMap = new HashMap();
            resultMap.put("id",provinceName);
            resultMap.put("drilldown",provinceName);
            resultMap.put("name",provinceName);
//            再根据城市分组
            Map<String, List<User>> cityMap = provinceMap.get(provinceName).stream().collect(Collectors.groupingBy(User::getCity));
            List<Map> dataMapList = new ArrayList<>();
            for (String cityName : cityMap.keySet()) {
                Map dataMap = new HashMap();
                dataMap.put("name",cityName);
                int citySize = cityMap.get(cityName).size();
                dataMap.put("y",citySize);
                dataMapList.add(dataMap);
                provinceSize+=citySize;
            }
            resultMap.put("y",provinceSize);
            resultMap.put("data",dataMapList);
            resultMapList.add(resultMap);
        }
            return resultMapList;
    }

第三步：完成js代码

 pieCharts(){
             axios.get("/stat/pieCharts").then(res=>{
                let datas = res.data;
                 Highcharts.chart('container', {
                     chart: {
                         type: 'column'
                     },
                     title: {
                         text: '公司原因地方来源'
                     },
                     xAxis: {
                         type: 'category'
                     },
                     yAxis: {
                         title: {
                             text: '人数'
                         }
                     },
                     legend: {
                         enabled: false
                     },
                     plotOptions: {
                         series: {
                             borderWidth: 0,
                             dataLabels: {
                                 enabled: true,
                                 format: '{point.y}'
                             }
                         }
                     },
                     tooltip: {
                         headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                         pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                     },
                     series: [{
                         name: '省份',
                         colorByPoint: true,
                         data: datas
                     }],
                     drilldown: {
                         series: datas
                     }
                 });

             })

         }

效果：

点击河北省

Echarts

简介

ECharts是由百度前端团队开发的一款开源的基于js图形报表组件，一个使用js实现的开源可视化库，可以流程的运行在pc和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图标ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图标

ECharts 特性：

丰富的可视化类型

多种数据格式无需转换直接使用

千万数据的前端展现

移动端优化

多渲染方案，跨平台使用！

深度的交互式数据探索

多维数据的支持以及丰富的视觉编码手段

动态数据

绚丽的特效

下载安装

下载js

将js放入项目中

入门案例

第一步：导入js依赖

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
</head>
</html>

第二步：配置dom容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

第三步：初始化图形

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

效果：

准备页面

在static下新建一个页面echarts_index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui" />
    <title>echarts图表报表</title>
    <link rel="stylesheet" href="css/charts_demo.css">
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/echarts.min.js"></script>

</head>
<body>
<div id="app" class="my-box">
    <div class="my-box-left">
        <button @click="columnCharts">统计各部门人数</button> <br/> <br/>
        <button @click="lineCharts">月份入职人数统计</button> <br/> <br/>
        <button @click="pieCharts">员工地方来源统计</button> <br/> <br/>
        <button @click="mapCharts">员工地方来源统计(地图)</button> <br/> <br/>
    </div>
    <div class="my-box-right">
        <div id="container" style="height:450px;"></div>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{},
        methods: {
            columnCharts() {

            },
            lineCharts(){

            },
            pieCharts(){

            },
            mapCharts(){

            }
        }
    });
</script>
</html>

统计各部门人数（柱状图）

columnCharts() {
    axios.get("/stat/columnCharts").then(res=>{
        let datas = res.data;
        let titles=[];  //x轴上显示的数据
        let values=[]; //y轴上显示的数据
        for (let i = 0; i < datas.length; i++) {
            titles[i] = datas[i].deptName;
            values[i] = datas[i].num;
        }

        var myChart = echarts.init(document.getElementById('container'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '各部门人数'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: titles
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: values
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.clear();
        myChart.setOption(option);

    })
}

访问localhost:8080/echarts_index.html

效果

月份入职人数统计

修改echarts_index.html中的js方法

lineCharts(){
    axios.get("/stat/lineCharts").then(res=>{
        let datas = res.data;
        let titles=[];  //x轴上显示的数据
        let values=[]; //y轴上显示的数据
        for (let i = 0; i < datas.length; i++) {
            titles[i] = datas[i].name;
            values[i] = datas[i].num;
        }

        var myChart = echarts.init(document.getElementById('container'));

        option = {
            xAxis: {
                type: 'category',
                data: titles
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: values,
                type: 'line'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.clear();
        myChart.setOption(option);
    })
}

员工地方来源统计（饼图）

Echarts没有提供下钻效果，但是有一个和下钻类似的效果

第一步：后台代码提供数据

1、StatController

@GetMapping(value = "/pieECharts",name = "公司员工地方来源，包括省、市")
public Map  pieECharts(){
    return  statService.pieECharts();
}

2、StatService

public  Map pieECharts() {
    Map resultMap = new HashMap();
    //        最终想要的数据格式：{province:[{name:,value:}],city:[]}
    Example example = new Example(User.class);
    example.setOrderByClause("province , city");
    List<User> userList = userMapper.selectByExample(example); //查询所有员工数据
    //        根据省份分组
    List<Map> provinceMapList = new ArrayList<>();
    //        注意分组时得排序，不然数据会乱
    Map<String, List<User>> provinceMap = userList.stream().collect(Collectors.groupingBy(User::getProvince,LinkedHashMap::new,Collectors.toList()));
    for (String provinceName : provinceMap.keySet()) {
        Map map = new HashMap();
        map.put("name",provinceName);
        map.put("value",provinceMap.get(provinceName).size());
        provinceMapList.add(map);
    }

    List<Map> cityMapList = new ArrayList<>();
    //        注意分组时得排序，不然数据会乱
    Map<String, List<User>> cityMap = userList.stream().collect(Collectors.groupingBy(User::getCity, LinkedHashMap::new,Collectors.toList()));
    for (String cityName : cityMap.keySet()) {
        Map map = new HashMap();
        map.put("name",cityName);
        map.put("value",cityMap.get(cityName).size());
        cityMapList.add(map);
    }

    resultMap.put("province",provinceMapList);
    resultMap.put("city",cityMapList);

    return resultMap;
}

第二步：js代码

pieCharts(){
    axios.get("/stat/pieECharts").then(res=>{
        let datas = res.data;
        // 需要三种数据：都可以从datas中获取
        //  1、省份数据 [{name:"河北省",value:10}]
        // 2、城市数据 [{name:"石家庄",value:3}]
        // 3、城市的名称
        let provinceData =  datas.province;
        let cityData = datas.city;
        let cityNames = [];
        for (let i = 0; i < cityData.length; i++) {
            cityNames[i] = cityData[i].name;
        }


        var myChart = echarts.init(document.getElementById('container'));

        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: cityNames
            },
            series: [
                {
                    name: '员工来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },
                    data: provinceData
                },
                {
                    name: '员工来源',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    },
                    data: cityData
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.clear();
        myChart.setOption(option);
    })
}

效果：

员工地方来源统计（中国地图）

第一步：参考官网源码引用js

Examples - Apache ECharts

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=UzpZ9A94pysSfj013URfjCfeUKjMv52F"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

第二步：修改js代码

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=UzpZ9A94pysSfj013URfjCfeUKjMv52F"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

效果：