ECharts插件:官网下载echarts.js开发者可以选择源码。
下载地址:http://echarts.baidu.com/download.html

下载之后,echarts.js放在js文件夹,后续使用。

下载html模板:http://echarts.baidu.com/examples/index.html

在这里可以发现好多好用的模板。选择一个自己喜欢的模板点击进去,点击Download

把下载的html文件打开,这时候html使用的是远程的js文件,直接打开是有效果的,因为它可以访问到,如果我们要放在程序中,尽量还是使用自己的本地的echarts.js,把下面截图这些去掉,引用我们刚开始下载的echarts.js,

上图注释掉 ,添加

<script type="text/javascript" src="js/echarts.js"></script>

这时候打开html,就变成了我们想要的效果,喜欢哪个插件就去下载使用哪个插件吧。

下图为替换好的效果图

  好了,自己想要的插件已经可以展示了,但是怎样换成自己想要的数据呢?那我们要开始修改js了。每个html里面都有对应的js,这些js的作用就是把你想要展示的数据传递给插件,插件识别并且展示出效果。

  我们拿地图这个插件来讲吧,它首先在地图上面设置一些城市坐标,如下图(好多城市,截图没有截完)

  插件自带的这些城市基本上能满足需求,当然,你还可以自定义一些城市,同样放置在这里,比如:

"女儿国":[101.05,23.08],
"乌鸡国":[95.11,34.97],
"天竺":[122.02,37.93],
"四海八荒":[136.1,19.55],

  把这些数据放在里面,同样可以展示自己想要的效果。

  接下来给对应城市赋值,值越大,则标记的圆点越大,在右边的Top20排行越靠前,下面是模板赋值示例:

  现在我们按照例子的方式给我们刚才自定义的几个城市进行赋值,让它们在地图上面显示出来。如果是后台穿过来的数据,可以通过for循环把值放到这个date里面赋值如下:

{name: "乌鸡国", value: 400},
{name: "女儿国", value: 300},
{name: "四海八荒", value: 193},
{name: "天竺", value: 380},

  赋值完毕,刷新页面就可以了。效果如下图,额......坐标位置的问题,大家自己调整哈。但是为什么不显示“天竺”和“四海八荒”呢?因为我选择的区域里面没有“天竺”和“四海八荒”,这个是选中区域,对选中的区域进行top20展示的。

所以呢?我们框选全部区域如下图:

发现框选全部区域之后,“女儿国”和“乌鸡国”也没有了,经过研究代码发现,程序对选中的所有的值,取倒数30条(标题是Top20,但是程序里面是写的30,此处可以手动修改下面会讲),然后以从大到小的顺序排序。

原代码如下图:

selectedItems是所有选择的数据集合,maxBar是展示条数,maxBar=30则最多展示30条,maxBar=20则最多展示20条。我们拿30条来说,maxBar=30则通过for循环取selectedItems的前30条,因为selectedItems是按数据设置的value的值从小到大进行排序的,假如你选择了40条,程序只展示前30条,那么最后10条最大的数据是展示不出来的,我们通过修改程序进行修复。修复方法如下:

    for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
if(selectedItems.length-maxBar>0){ categoryData.push(selectedItems[selectedItems.length-maxBar+i].name); barData.push(selectedItems[selectedItems.length-maxBar+i].value[2]);
}else{ categoryData.push(selectedItems[i].name); barData.push(selectedItems[i].value[2]);
}
}

修复后效果如下图:

  图中为什么没有“四海八荒”呢?因为四海八荒设置的坐标太远了,没有框选到。

  关于ECharts插件的使用,有不懂得可以查看ECharts的文档,这里有关于ECharts的详细解释,阅读参考文档,再配合自己研究代码,即可达到自己想要的效果。

附上文档地址:http://echarts.baidu.com/api.html#echarts

完毕!

ECharts插件的使用的更多相关文章

  1. angular引用echarts插件

    方法一 1. 命令行下载 npm install echarts --savenpm install ngx-echarts --save 2. angular.json 配置echarts路径. 2 ...

  2. 项目中使用ECharts插件实现统计功能

    一.前端界面 // 界面中定义一个div,放图表 <div id="box" style="width: 600px;height:400px;padding: 1 ...

  3. 【React】react项目引入echarts插件 K线图

    参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...

  4. javascript相框echarts插件实现酷立方效果图的人

    最近由于项目需求,我们需要做的一类似网络效应的人立方效果,很多文件中的查询之后.百度发现echarts开源组件非常适合,而加载速度是伟大的.echarts图形主要使用html5这些新功能做,使用can ...

  5. ECharts插件介绍(图表库)

    ECharts是一个非常好用的插件,用于进行 树状图,折线图,饼图,地图等等,系列视图的绘制.(详情看官网) 了解: AMD:模块化开发方式: 引入文件后:console.log(echarts) / ...

  6. Echarts插件

    <%@ page contentType="text/html;charset=UTF-8" language="java" %><% Str ...

  7. Vue2.0+elementUI使用echarts插件

    1.npm安装echarts:     $ npm install echarts -S 2.html代码: <template> <div id="chartColumn ...

  8. 百度echarts插件x轴坐标显示不全决解方法

    X轴显示不全: xAxis.axisLabel.interval number, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...

  9. echarts插件-从后台请求的数据在页面显示空白的问题

    最近的项目里面关于统计图方面的问题,有涉及到很多,也在博客里面更新了自己所遇到的问题,开发过程中会遇到很多问题,解决技术问题的方法也有千千万 图片.png 在百度上百度了一下,发现了问题所在之处,不得 ...

随机推荐

  1. Saltstack的安装和配置

    1.安装salt 因为系统自带的yum源不支持saltstack安装包的支持,所以需要安装第三方yum源(epel) # yum -y install epel-release salt分为主服务器( ...

  2. thinkphp 官方文件执行引入流程

    官方手册上的执行流程图: 系统流程 用户URL请求 调用应用入口文件(通常是网站的index.php) 载入框架入口文件(ThinkPHP.php) 记录初始运行时间和内存开销 系统常量判断及定义 载 ...

  3. [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

    效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...

  4. apidoc快速生成在线文档,apidoc生成静态文件的生成规则以及原理分析

    在老大的指引下,需要将系统的json文件格式转换成apidoc的json格式,也就是json格式的重组,但是这个apidoc的生成格式是不固定的,因为apidoc有自己一套的生成规则,我需要研究一下是 ...

  5. 设计模式(三)装饰者模式Decorator

    装饰者模式针对的问题是:对一个结构已经确定的类,在不改变该类的结构的情况下,动态增加一些功能. 一般来说,都是对一些已经写好的架构增加自己的功能,或者应对多种情况,增加功能. 我们还是来玩一句红警,首 ...

  6. 【旋转卡壳+凸包】BZOJ1185:[HNOI2007]最小矩形覆盖

    1185: [HNOI2007]最小矩形覆盖 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special JudgeSubmit: 1945  Solve ...

  7. 【数论】洛谷P1414又是毕业季II

    题目背景 "叮铃铃铃",随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业 ...

  8. windows 下进程池的操作

    在Windows上创建进程是一件很容易的事,但是在管理上就不那么方便了,主要体现在下面几个方面: 1. 各个进程的地址空间是独立的,想要在进程间共享资源比较麻烦 2. 进程间可能相互依赖,在进程间需要 ...

  9. unisound_asr 云知声 语音识别 python版接口

    抽空,实现了一份云知声 语音转写的python版本. 使用python通过调用动态库实现. 云知声官网: http://dev.hivoice.cn/sdk_download/schema_sdk.j ...

  10. Chris Richardson微服务翻译:构建微服务之使用API网关

    Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关(本文) 构建微服务之微服务架构的进程通讯 微服务架构中的服务发现 微服务之事件驱动的数据管理 微服 ...