一、实现要点

  常用可视化图表库

    Echarts
    HighCharts
    D3.js
    neo4j (NOSQL)

  1. 1.导入js
  2. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  3. <script type="text/javascript" src="js/echarts.min.js"></script>
  4. <script type="text/javascript" src="js/bar.js"></script>
  5. 2.定义div
  6. <div id="show" style="height:600px;width:800px"></div>
  7. 一定要设置高度 height
  8. 3.给数据赋值
  9. option.xAxis.data = data.x;
  10. option.series[0].data=data.y;
  11. 4.设置option
  12. myChart.setOption(option)

二、数据处理

  1. 1.series添加数据
  2. 1.1按相应的格式添加数据
  3. diySeries.push({
  4. data : data.y1,
  5. type : 'bar'
  6. })
  7.  
  8. 1.2数组数据------循环添加,
  9. for(i in inn){
  10. var name = inn[i].split(",")[0];
  11. var value = inn[i].split(",")[1];
  12. innerData.push({
  13. name : name ,
  14. value : value
  15. })
  16. }

Echarts简单图表的更多相关文章

  1. eCharts使用图表简单示例

    https://blog.csdn.net/hlbt0112/article/details/48862427 1. eCharts官网 http://echarts.baidu.com/index. ...

  2. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  3. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

  4. echarts 实战 : 图表竖着或横着是怎样判定的?

    这个问题比较简单. echarts 的图表默认是竖着的. 只要 xAxis 和 yAxis 互换,竖着的图就变成了横着的图了. 所以我们可以可以写一个xy轴互换的方法. reverseXYAxis = ...

  5. 自学Zabbix3.8.1.1-可视化Visualisation-Graphs简单图表

    自学Zabbix3.8.1.1-可视化Visualisation-Graphs简单图表 Zabbix提供了一些简单的图表,用于可视化由项目收集的数据. 用户不需要进行配置工作来查看简单的图表.他们是由 ...

  6. Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  7. echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

    这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...

  8. Echarts导出为pdf echarts导出图表(包含背景)

    Echarts好像是只支持png和jpg的导出,不支持pdf导出.我就想着只能够将png在后台转为pdf了. 首先介绍一下jsp界面的代码. var thisChart = echarts.init( ...

  9. echarts的图表根据父容器大小的改变而改变(弹窗easy-ui的window窗口)

    1.echarts的图表只绘制一次,所以要想大小随着父容器变化就得调方法重新绘制.所以把绘制图表的方法提出来. <div class="echart"> <div ...

随机推荐

  1. python -- 将string转换成dict的方法

    装载自:http://smilejay.com/2014/10/convert_string_to_dict_python/ 我将数据库连接相关的一些用户名/密码/host/port等各种东西作为一个 ...

  2. HDU 3746 Cyclic Nacklace(求补齐循环节最小长度 KMP中next数组的使用 好题!!!)

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  3. 404 Note Found队 Alpha7

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  4. linux SVN添加新用户

    首先找到用户文件:authz.conf; 用vi 编辑authz.conf文件在develps 后面添加你要添加的用户名:如图:  上图:cheny就是我后面添加上去的用户名 按Esc :wq保存au ...

  5. Oracle特有函数 case when decode exists 分页rownum

    select * from EMP eselect * from dept dselect * from salgrade s--Oracle特有函数 case whenselect case 2 w ...

  6. Mysql-数据的完整性约束

    一 .介绍 二 .not null与default 三 .unique 四 .primary key 五 .auto_increment 六 .foreign key 一 .介绍 约束条件与数据类型的 ...

  7. 自定义loading效果

    结合Font Awesome字体图标自定义loading效果 Font Awesome字体图标地址:http://www.fontawesome.com.cn/faicons/ 使用javascrip ...

  8. $.ajax 完整参数

    jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意 ...

  9. 1.Hadoop集群安装部署

    Hadoop集群安装部署 1.介绍 (1)架构模型 (2)使用工具 VMWARE cenos7 Xshell Xftp jdk-8u91-linux-x64.rpm hadoop-2.7.3.tar. ...

  10. Shellinabox on centos6.9

    介绍 一款实用的web linux终端, 并且保证操作安全性(屏蔽root用户) 下面以centos6.9为例 安装 首先安装epel仓库,再安装shellinabox yum -y install ...