Qt编写地图综合应用36-覆盖物折线

# 一、前言

折线图目前应用最广的也是用来绘制各种轨迹，折线图其实就是后面动态轨迹图、飞机航线图的前身，公用的一个方法addPolyline，折线图可以设置颜色、粗细、透明度等属性，如果开启了悬浮绘图工具栏，也可以直接单击工具栏中的折线图绘制工具，直接动态绘制。

## 二、功能特点

1. 同时支持在线地图和离线地图两种模式。

2. 同时支持webkit内核、webengine内核、miniblink内核、IE内核。

3. 支持设置多个标注点，信息包括名称、地址、经纬度。

4. 可设置地图是否可单击、拖动、鼠标滚轮缩放。

5. 可设置协议版本、秘钥、主题样式、中心坐标、中心城市、地理编码位置等。

6. 可设置地图缩放比例和级别，缩略图、比例尺、路况信息等控件的可见。

7. 支持地图交互，比如鼠标按下获取对应位置的经纬度。

8. 支持查询路线，可设置起点位置、终点位置、路线模式、路线方式、路线方案（最少时间、最少换乘、最少步行、不乘地铁、最短距离、避开高速）。

9. 可显示点线面工具，可直接在地图上划线、点、矩形、圆形等。

10. 可设置行政区划，指定某个城市区域绘制图层，在线地图自动输出行政区划边界点集合到js文件给离线地图使用。

11. 可静态或者动态添加多个覆盖物。支持点、折线、多边形、矩形、圆形、弧线、点聚合等。

12. 提供函数接口处理经纬度解析成地址和地址解析成经纬度坐标。

13. 提供的demo直接可以单独选点执行对应的处理比如路线查询。

14. 可以拿到路线查询到的点坐标信息集合，比如用于机器人坐标导航等。

15. 封装了丰富的函数比如删除指定点和所有点，删除指定覆盖物和所有覆盖物等。

16. 标注点弹框信息可以自定义内容，标准html格式。

17. 标注点单击事件可选 0-不处理 1-自己弹框 2-发送信号。

18. 标注点可设置动画效果 0-不处理 1-跳动 2-坠落

19. 标注点可设置本地图片文件等。

20. 函数接口友好和统一，使用简单方便，就一个类。

21. 支持js动态交互添加点、删除点、清空点、重置点，不需要刷新页面。

22. 支持任意Qt版本、任意系统、任意编译器。

## 三、体验地址

1. 体验地址：[https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A](https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取码：o05q 文件名：bin_map.zip

2. 国内站点：[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)

3. 国际站点：[https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)

4. 个人主页：[https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun)

5. 知乎主页：[https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/)

## 四、效果图

## 五、相关代码

O.194

2020.08.24

工欲善其事，必先利其器

- 前言 -

◆ ◆ ◆ ◆

今天，小咖再来讲讲Pyecharts这一强大的数据可视化工具，其可将python与echarts结合，最终将得到动态且美观的图表（用html打开即为动态）。往期中，小咖曾展示过Pyecharts的动态柱状图、折线图、饼图、散点图、地图、玫瑰图的做法，今天小咖再来展示Pyecharts下词云的做法。

之前小咖曾在Python金融应用之制作词云中提出过jieba的用法。相较而言，jieba适用于大段文本分析，而本文Pyecharts下的wordcloud则更适用于已整理出关键词及其频率的数据分析。

- Pyecharts做词云图 -

◆ ◆ ◆ ◆

第一步：安装各种包

资料来源：西瓜财经资讯

第二步：从wind导入基金重仓股票数据

资料来源：西瓜财经资讯

（1）从wind的基金——专题统计——资产配置中，下载基金重仓持股数据，置于特定文件夹中。

资料来源：wind

（2）通过python提取excel数据，并保存为dateframe。

资料来源：西瓜财经资讯

（3）将dateframe的列名称设为第一行数据。

资料来源：西瓜财经资讯

（4）删除第一行，并删除排名在三十以后的重仓股数据。

资料来源：西瓜财经资讯

第三步：利用pyecharts做词云

资料来源：西瓜财经资讯

（1）先安装pyecharts：

pip install pyecharts

（2）pyecharts主要语句有：

——add()：主要方法，用于添加图表的数据和设置各种配置项

——print_echarts_options()：打印输出图表的所有配置项

——render()：默认将会在根目录下生成一个 render.html 的文件，支持path参数，设置文件保存位置，如 render(r"e:\my_first_chart.html")，文件用浏览器打开

（3）做词云。具体包括：

——导入图形语句：from pyecharts import WordCloud

——设置主标题与副标题、图形大小：wordcloud=WordCloud

——设置主题：wordcloud.use_theme('roma')
——添加词云的数据及配置项：wordcloud.add，包括数据，图例，标签等。

（4）设置标签栏的属性：

资料来源：西瓜财经资讯，简书

（5）注意，用pyecharts画词云时，可以输入两种形式的数据：

①分别设置Word数据和权重，如本文使用的如下语句：

wordcloud.add("词云图", #设置名称

stock['名称'], #设置word数据

stock['持有基金数']） #设置词语权重

②同时设置Word数据和权重，即（word，value）这样的元祖形式，然后将所有的词放入一个list中。

例如：[(贵州茅台'',1345), ('立讯精密',1082)]

（6）通好设置不同的主题和词云形状，可以得到如下不同的词云。

资料来源：西瓜财经资讯

参考链接：

https://www.jianshu.com/p/23200304409c

- 后言 -

◆ ◆ ◆ ◆

想要获取源代码的小伙伴关注公众号，后台回复“Python金融应用之利用Pyecharts做动态图（五）”即可。注意，源代码可以直接粘贴使用，而且是带文字说明的哦。

没发现 ECharts 这款神器的时候，之前所做的数据统计图只能自个纯手写，倒也是可以实现，只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件，便尝试了一下，那感觉真的不要太爽！

官方介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

获取 ECharts

1、下载地址

https://github.com/apache/incubator-echarts

2、点击红色箭头按钮，将压缩包下载下来

image

3、echarts 库放在解压后文件夹中的 dist 目录里

image

将整个 dist 目录复制到你的项目中去，可重命名为 echarts

备注：若不想下载 ECharts 库文件，可在头部直接引用 bootcdn 上的 echarts 文件，地址为：

https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js

绘制数据图表

1、柱状图

image

柱状图效果预览

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计图：柱状图</title>
    <!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
    <script src="echarts/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: '2014-2019年 前端人均工资'
            },
            tooltip: {},//提示框组件（鼠标移动到数字表时触发）
            xAxis: {  //x轴
                data: ["2014年","2015年","2016年","2017年","2018年","2019年"]
            },
            yAxis: {},//y轴 内容会自动从以下的series.data 中获取
            series: [{
                name: '人均工资',
                type: 'bar', //类型为：柱状图
                data: [3800, 4600, 5100, 5800, 6300, 7300] //x轴项目对应的数据
            }]
        };

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

    </script>

</body>
</html>

2、折线图

image

折线图效果预览

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计图：折线图</title>
    <!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
    <script src="echarts/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: '未来一周气温变化'
            },
            tooltip: {
                trigger: 'axis'
            },

            xAxis:  {
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {  //坐标轴刻度标签的相关设置。
                    formatter: '{value} °C'  // 使用字符串模板，模板变量为刻度默认标签 {value}
                }
            },
            series: [
                {
                    name:'最高气温',
                    type:'line',
                    data:[11, 11, 15, 13, 12, 13, 10],
                },
                {
                    name:'最低气温',
                    type:'line',
                    data:[1, -2, 2, 5, 3, 2, 0],

                }
            ]
        };

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

    </script>

</body>
</html>

3、饼图

饼图效果预览

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据统计图：饼图</title>
    <!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
    <script src="echarts/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: '某公司年龄阶段的员工占比',
                x:'center'//水平居中
            },
            tooltip : {//提示框组件。
                trigger: 'item',  //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                formatter: "{a} <br/>{b} : {c} ({d}%)" //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            },
            series : [
                {
                    name: '年龄占比',
                    type: 'pie',
                    radius : '55%',//饼图的半径
                    center: ['50%', '60%'],//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                    data:[
                        {value:80, name:'20-25岁'},
                        {value:30, name:'26-30岁'},
                        {value:20, name:'31-35岁'},
                        {value:8, name:'36-40岁'},
                        {value:5, name:'41岁以上'}
                    ],
                    itemStyle: {//图形样式。
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

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

    </script>

</body>
</html>

结语

以上绘制的图表是数据图中用的频率较高的三种。不仅如此，ECharts 还可用于地理数据可视化的地图，用于关系数据可视化的关系图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，并且支持图与图之间的混搭。更多有关 ECharts 的使用方法，可参考 ECharts 的官方文档：

https://echarts.baidu.com/index.html

在线咨询

上一篇：Web开发学习笔记（12）-HTML5（面试题）
下一篇：8招教你快速搞定网页内容禁止复制粘贴，想怎么复制就怎

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Qt编写地图综合应用36-覆盖物折线

# 一、前言

## 二、功能特点

## 三、体验地址

## 四、效果图

## 五、相关代码

您的项目需求