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>

效果:

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值