参考:http://echarts.baidu.com/option.html#title https://www.cnblogs.com/zhangyong123/p/4974554.html https://www.cnblogs.com/moonache/p/4661058.html http://echarts.baidu.com/examples/editor.html?c=effectScatter-map 写了个简单的servlet来显示 下面是代码 city.txt(只是制造数据…
百度显示中国地图的地址 https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all%3Ftdsourcetag var chinaJson = {"type": "FeatureCollection", "features": [ {"type": "Feature","properties":{&qu…
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界面优美.由于客户是淘宝卖家,因此想要实现每个月全国各个省份各自购力如何,大家可以统计其他的,如果GDP 人口 等等. 百度echarts简介请参考 http://echarts.coding.io/doc/example.html 效果图如下:全部是动态数据 JS代码: <!-- Charts La…
/** 转载请保留博客园原地址以及版权声明,请勿恶意修改,本博客中的内容均属于技术交流,请勿用于商业用途,谢谢配合 *  作者:杨浩瑞  QQ:1420213383  独立博客:http://www.yxxrui.cn * [后台]http://xiaoshuo.qqsiot.cn/manager [前台]http://y6.qqsiot.cn *  管理员账号:admin  渠道商账号:channel  代理商账号:agent  演示密码:123456 **/ 使用百度echarts插件来制作…
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子吧 http://echarts.baidu.com/examples.html 效果图: 关于可行性:以前常听人说wpf动画开多了会很卡,而我也没有写过含有大量动画的项目,不知道实际怎样,这个地图显然全是动画,所以我写了个测试动画性能的小程序,生成100个点和线跑动画,发现完全没有什么问题. 所以…
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂本文. 可能官方也提供过整体的地图库,但可能个人能力有限,并没有找到相关信息或者其他解决方案,如果知道的园友请告诉我. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safa…
背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强大,界面优美, 但是使用起来非常繁琐.本文在参考 星星之火116 写的“Echarts使用心得总结”基础上,进一步对JS进行封装.使得其更具有通用性. (1)解决方案布局 整个解决方案如下图(VS2010+.NET4.0). 唯一需要说明的是Javascript文件夹下的JS库,其中jquery-1…
百度Echarts的功能还是蛮好用的.. 不能说多好但是也不次.. 下边就分享一些数据绑定经验..对在处理过程中的思路有一些帮助... 报表里用的最多的可以说是 饼状图和柱形图.. 饼状图里当然是包括环形图..还有所谓的玫瑰饼图... 柱形图里包括了曲线图..条状图等..只是展现形式不一样而已.. 那么有没有可能这些报表都在后台统一查询统计..同样格式的数据输出到前台..自由根据类别显示数据呢.. 我们说数据查询之后的结果.. -------------分割线--------------- 时间…
ECharts, 缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库, 可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /10/11,chrome,firefox,Safari等), 底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性 化定制的数据可视化图表. 创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折 线图(区域图).柱状图…
为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js 以下为示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t…
1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下,如何用ajax+百度Echarts实现我们动态数据的绑定呢? 2.详情 写一个很全的demo.接口的url自己换,数据结构自己换. 1.引入百度echarts库 <script type="text/javascript" src="http://api.map.baid…
问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就很大,所以导致显示不下,那么只要我们将显示的值按比例缩小,应该就可以了. 原始值很大: var map = data.map; for (var key in map){ var stockCode = key; option.legend.data.push(stockCode); var ind…
1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考链接:https://blog.csdn.net/qq_21386275/article/details/79039024 //地图展示 function map() { //url,将需要的数据查询出来,放到固定的省份的位置即可. var url = "xxxxxx.action"; v…
百度地图管理员的回复:这是KEY服务升级的问题, 给您造成的不便,非常抱歉.但我们昨日已修复,你可以再审核一番.若不可以,请提供一下您的系统ak,邮箱或qq发送至(wangwenhai@baidu.com,100681513)简单描述一下问题. 与之沟通后的解决方法:把key=yourAppKey改为ak=yourAppKey,或者把v=1.5改为v=15 ,这样就可以解决百度未授权使用地图API的问题.…
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', // 自定义扩展图表类型 zoom: 1.25, itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, label: { normal: { textStyle: { f…
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: '郑州', value: 100 //扩散的大小 }, { name: '北京', value: 100 }, { name: '香港', value: 100 }, { name: '上海', value: 100 }, ]; var geoCoordMap = { '郑州': [113.64963…
mark http://git.oschina.net/seeyoui/kensite_cms/blob/master/src/main/java/com/seeyoui/kensite/framework/report/ksChart/controller/KSChartController.java ** * 百度Echarts统计图表 * @author cuichen * @version 1.0 * @since 1.0 * @date 2015-11-16 */ @Controlle…
最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附件,所以就先附上部分重要代码,节点的参数大部分封装在后台代码中,前端js只负责配置参数以及调用后台获取对应的节点以及关系线.你也可以所有节点和线的数据都在js中构造也是可以的. //C#代码 using System; using System.Collections.Generic; using…
echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min.js:http://echarts.baidu.com/download.html china.js:https://github.com/apache/incubator-echarts(下载以后,找到map文件夹中的china.js) 页面代码: echartsMap.jsp: <!DOCTY…
百度echarts可以做什么 一.总结 一句话总结:可视化做的很好,各种图都有.而且支持动态数据. 二.百度eCharts体验 前言 从昨天开始给项目里添加一些图表对比功能,上一个项目里使用的是Highcharts,本打算继续用Highcharts做的,昨天试了下做出来的效果不太好,主要也是因为看的多了没什么新鲜感了,于是便尝试下百度做的ECharts, 总体效果还是不错的. 先来几张效果图体验下 其中第6张.第七张的效果可以说是在HTML环境下将Canvas发挥到极致,虽然我目前还没接触到HT…
在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应 将后台返回的数据中的value放入一个新的数组中,然后取出数组中的最大值来设置给echarts的visulMap的max属性,并将最小值设置给min属性,当后台没有数据返回的时候会报错,所以要进行一下判断 这里取最大值和最小值使用的是扩展运算符配合Math.max/Math.min来实现的 //data是后台返回的数据var leng…
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip . 百度地图离线瓦片下载使用“迈高图-地图数据下载器”(以下简称:迈高图),演示数据以湖南省长沙市芙蓉区12~18级瓦片数据为例. 下载演示数据 迈高图选择百度地图为当前地图源,地…
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上)  小红  2016-04-28  ECharts, 教程, 地图 ECharts 作为国内应用最广泛的前端可视化生成工具,提供了丰富的图表展现方式和便捷的图表操作. ECharts 支持 geoJson 格式的地图,并且官网上提供了现成的 world,china 及全国34个省市自治区地图的下载.这篇文章中我们将会讲解如何使用 ECharts 实现一个…
今天打开网站的时候出现了这个问题“百度未授权使用地图API, 可能是因为您提供的密钥不是有效的百度开放平台密钥或此密钥未对本应用的百度地图JavasoriptAPI授权.…”经过研究终于知道什么原因了. 官方解析:http://lbsyun.baidu.com/index.php?title=jspopular/qa 1.点击进去API控制台 2.需要登录百度用户登录 3.一般提交后就会生成一个您的密钥 4.最后把生成的密钥放到这个里面,然后放到你的网站就可以了 <script type="…
Echarts mc地图 echarts官网实例: https://gallery.echartsjs.com/editor.html?c=xSNlA5O-zl 效果: 代码: <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src…
话不多说,先上效果图 以前在做项目时,经常会听到客户说,你们这个地图是哪来的,太丑了,能不能换成百度地图--高德也行-- 大家生活中,基本上都已经习惯了使用百度地图和高德地图,而在做项目时,用这两个地图做为底图,也基本成为了标配.但在开发中使用这两个地图,会遇到一个拦路虎,坐标偏移问题. 全球现在用的最多的坐标,是wgs84坐标,专业GPS设备和手机GPS定位得到的坐标,通常都是这个坐标.我们国家为了保密需要,要求在国内发布的互联网地图,必须要在这个基础上进行加密偏移.加密后的坐标叫做国测局坐标…
需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, useEffect, useState } from "react"; import Sss from "../../images/index/sss.png"; import SssActive from "../../images/index/sss-on.p…
一.下载ECharts的js库 下载地址:http://echarts.baidu.com/download.html 由于我们对体积无要求,所以我们采用了完整版本,功能齐全,在项目中,我们只需要像普通的 JavaScript 库一样用 script 标签引入即可. <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <!-- 引入 ECharts 文件 --&g…
var data={}; for(var i=0;i<result.length;i++){ data[(""+result[i].name+"")]=eval("("+result[i].location+")"); } geoCoord:{'Islands':[113.95, 22.26]} geoCoord是一个obj,Islands类型也是obj,[113.95, 22.26]是数组,要将json种取出的数组转换…
echarts官网网址:http://echarts.baidu.com/ echarts源码地址:http://echarts.baidu.com/build/echarts-2.2.7.zip     [可能谷歌浏览器下载很慢,建议火狐] 把build文件夹 和src 文件夹下的文件引入到公共的public模块中.…