前言 echarts是百度出品的一款很棒的前端图表控件,被评为“百度少有的良心产品”.可以实现散点图.折线图.柱状图.地图.饼图.雷达图.K线图等等几十种常用.不常用的图表,效果酷炫. 示例地址:http://echarts.baidu.com/examples.html 由于近期项目的需要,我开发了一款echarts插件,可以让序列series分组展示,下拉框选择.这样当series较多时,不再被超长的图例legend所困扰,而且可以自带全选功能. 效果 用作示例的数据,产品维度分为衬衫.羊毛…
前言 echarts是百度出品的一款很棒的前端图表控件,被评为"百度少有的良心产品".可以实现散点图.折线图.柱状图.地图.饼图.雷达图.K线图等等几十种常用.不常用的图表,效果酷炫. 示例地址:http://echarts.baidu.com/examples.html 由于近期项目的需要,我开发了一款echarts插件,可以让序列series分组展示,下拉框选择.这样当series较多时,不再被超长的图例legend所困扰,而且可以自带全选功能. 效果 用作示例的数据,产品维度分为…
ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --> <script type="text/javascript" src="<%=contextPath%>/js/lib/echarts/echarts.common.min.js"></script> <!-- 为ECha…
前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下echarts中的地图控件 一.插件下载 echarts3是一个集成的插件,把很多东西都集成到一起了,使用很方便,从官网上下载一下,和普通js文件一样,直接添加到项目中,在HTML头部引用一下即可. 地图的插件也是一个js文件,数据是一个json文件,从官网下载下来,添加引用,但是一定注意引用的先后…
摘要: Solr对结果的分组处理除了facet还可以使用group.Solr的group是根据某一字段对结果分组,将每一组内满足查询的结果按顺序返回. Group对比Facet Group和Facet的概念很像,都是用来分组.Facet返回所有相关的结果并允许用户基于facet的目录重新定义结果集.Facet可以对分组数量进行过滤,以及排序,和日期范围,时间范围分组,但是如果你想得到具体的数据,还得需要查询一次或多次.group可以得到分组的组数量,一次请求,可以拿到所有的数据. Group和F…
1.工作中遇到的问题 我们在使用react-native肯定遇到过各种奇葩的问题,比如引入Echarts时候莫名报错,但是Echarts官网明显告诉我们可以懒加载的,这是因为基本上js大部分原生的组件库都不支持React-Native,直接引用都会报"undefined is not an object (evaluating 'ua.match')" when importing an incompatible (browser) library. 2.经过调研得知react-nat…
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ECharts</title> <script src="../../res…
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字,添加hover事件,将对应图片显示. 第二种方法: 使用图形插件echarts,轻松制作. http://echarts.baidu.com/doc/example.html在echarts网站上下载文件包 echarts使用方法查看页面 http://echarts.baidu.com/doc/d…
前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网提供了很多实例供参考:http://echarts.baidu.com/examples.html.感兴趣可以先一睹为快!!! 图1 图2 图1,2是我们常见到非常高大上的大数据展示屏的效果,非常的高大上,这实现效果全部是是用插件echarts来实现的.下面给大家介绍怎么去使用开源插件. 环境搭建 这个环境搭建so easy! 其实只有一个echarts.min.js而已.可以从官网下载http:…
1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaScript的相关知识. 2.4 最后还是要感谢,大神,感谢百度echarts,谢谢. 3.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">…