本文目录一览:
- 1、使用echart散点图绘制地图
- 2、echarts 使用json文件图出不来
- 3、C#中Echarts如何获取oracle中的数据然后可视化,将数据库数据转json格式,用ajax获取数据给js可视化吗
- 4、echarts使用本地json文件无法显示地图
- 5、怎么从JSON获取数据到Echart制作饼图
使用echart散点图绘制地图
之前没看过echart的地图,最近有个需求需要绘制到深圳地图,经过几番测试,实现需要的效果,这里写篇博客记录一下,先看效果图:
但如果不是node环境呢,比如本地的一个html文件,第一想到的是ajax,但这是本地模拟一下,使用ajax还是有点麻烦,这里超人鸭用一种不太规范的方法引入,这是json文件原本的样子:
我使用一个变量定义这个对象:
然后在html文件中用script标签引入:
这里已经引入成功了,我们可以打印测试一下:
是没问题的,现在拿到深圳地图的json数据,接下来就是绘制地图了,还是echart那一套:
先看看效果:
接下来就是往上面绘制散点图,既然是往以这个地图作为坐标系,那显示在上面点的位置就要在这个地图上,我们需要先写好每个地点的经纬度:
大家百度一下经纬度查询就能找到,然后是散点图的配置,还有一个处理数据的函数:
上面的处理函数也是从官网改造一点细节复制过来的,处理后的每一项data就是这个样子:
散点图会根据value的前两项去匹配坐标,在地图上显示,后面的数据并无关系。到这里的效果:
看到我使用了回调函数格式化了提示框显示的内容,这个回调函数带了一个params参数,这个对象里面基本什么信息都有,大家不知道的话打印一下什么都明了。
到这里就实现使用echart散点图绘制地图,超人鸭这篇文章所实现的适合那种某个区域的某种东西的分布情况,用处还是挺大的,欢迎大家指教哦。
echarts 使用json文件图出不来
放到IIS或者tomcat里用localhost:xx/xxx/2007-2011.html打开试试…
不要直接双击资源管理器里的html…
发布出来用浏览器访问使用的是http协议,双击html用的是file协议,file协议时用jQuery似乎就是有问题……
C#中Echarts如何获取oracle中的数据然后可视化,将数据库数据转json格式,用ajax获取数据给js可视化吗
接收MySQL数据
点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置网页链接
dip名称:使用英文且见名知义(最好使用驼峰命名法)。
dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。
进入如下界面,在黑窗口的run函数中编写JavaScript脚本,将获取到的数据转换成产品需要的数据结构,最后输出。
首先编写脚本获取数据,获取数据有2种方式,第一种是主动获取,第二种是被动接收,根据实际情况选择对应的获取数据方式。而每一种方式又有多种类型。
对接MySQL我们选择主动获取方式,点击输入-主动获取,选择第一项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 ,in 为接入语句,executes为数据处理逻辑,outs处填写数据输出语句。
如下图,在1处添加接入MySQL数据源url,username,password,在2处添加查询简单的查询sql语句,查询自己需要的数据。
function run() {
var MysqlJdbcAdapter = Java.type("com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter");
while (true) {
try {
var adapter = new MysqlJdbcAdapter("jdbc:mysql://127.0.0.1:3306/database?useUnicode=truecharacterEncoding=UTF-8", "root", "root");
var data = adapter.getDataByTable("select * from ...");
heartBeat.addInCount(data.size());
//executes...
//outs...
sleep(60000);
} catch (error) {
logger.error("脚本执行错误:",error);
}
}}
接收ActiveMq数据
点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置。
dip名称:使用英文且见名知义(最好使用驼峰命名法)。
dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。
echarts使用本地json文件无法显示地图
显示什么问题?我之前遇到的就是引用echarts后地图不显示的问题。
这个问题是因为echarts3的地图的geo数据以前的中国地图是内置了,现在新版本需要自己下载的china的js或json数据,引用了之后就可以显示了。
怎么从JSON获取数据到Echart制作饼图
下面是解决的代码:
饼图的数据获取的值为value,示例代码为:data:[
{value:335, name:'直接访问'},
{value:310, name:'xxxx'},
{value:234, name:'xxxx'},
{value:135, name:'xxxx'},
{value:1548, name:'xxxx'}]
我解决的代码是 value:{data[0].generalPractitionerRegistrationCount}获取到第一行值为generalPractitionerRegistrationCount