画报表框架——Echarts.js

官网:http://echarts.baidu.com/index.html ————————————————————————————————— 先看看我做的第一个柱状图形报表 ————————————————————————————————— 实现过程及理解: 1.首先理解配置文件所需,属性意义以上红色部分是配置的基本,一定要掌握的 2.…

jquery.wordexport.js打印echarts.js画出的柱状图

jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.wordexport.js只能打印出图片,所以我先把echarts柱状图换成图片再去打印的. 用echarts.js的API中的getDataURL()方法:导出图表图片,返回一个 base64 的 URL,可以设置为Image的src. <div id="tubi"></div&…

从零开始，搭建博客系统MVC5+EF6搭建框架（4）上,前后台页面布局页面实现，介绍使用的UI框架以及JS组件

一.博客系统进度回顾以及页面设计 1.1页面设计说明紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端…

前端数据可视化echarts.js使用指南

一.开篇首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据可视化的框架琳琅满目,例如:D3.js.hightcharts.js.echarts.js………….由于公司对这个项目的需求是1.开发时间短,所以也就限制了D3.js的使用.2.要尽量的减少开发的成本,所以也就不能使用hightcharts.js(hightcharts是一款个人免费,商业付费的框架…

【干货】利用MVC5+EF6搭建博客系统（四）（上）前后台页面布局页面实现，介绍使用的UI框架以及JS组件

一.博客系统进度回顾以及页面设计 1.1页面设计说明紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端…

前端数据可视化echarts.js

一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比较详细,而且官网中提供大量的使用示例供大家使用 2.支持按需求打包 echarts.js官网提供了在线构建的工具,可以在线构建项目时,选择项目所需要使用到的模块,从而达到减小JS文件的体积 3.开源 4.支持中国地图功能缺陷: 1.体积较大一个基础的echarts.js都要400K左右,相对于…

EBS 请求输出Html报表集成Echarts

百度开源的ECharts有样式丰富且美观的报表类型可供选用,可以将其集成至EBS请求输出的Html报表中,这其实就是一个生成Html数据的过程. 定义输出类型为HTML的请求我就不在此处赘述. 我们以ECharts中最简单的报表举例http://echarts.baidu.com/examples/editor.html?c=line-simple 其完整的html内容如下: <!DOCTYPE html> <html> <head> <meta http-e…

echarts.js应用之map

最近项目中用到了echarts.js中的map,我画了一个简版的案例,如下所示: 效果图: 主要代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mapChart</title> <script src="../static/js/echarts.min.js">…

vue-cli+vue 2.0+element-ui+vue-router+echarts.js开发后台管理系统项目教程

一.首先使用npm创建vue项目框架: 1.安装vue-cli: $ npm install --global vue-cli 2.初始化项目:$ npm init webpack 项目名 3.在项目目录下安装element-ui依赖: $ npm i element-ui -S import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 4.引入e…

H5案例分享：JS手势框架 —— Hammer.js

JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许同时监听多个手势.自定义识别器,也可以识别滑动方向. 二.事件 1.Rotate事件:在指定的dom区域内,当两个手指或更多手指成圆型旋转时触发(就像两个手指拧螺丝一样).该事件分别对以下事件进行监听并处理: Rotatestart:旋转开始:Rotatemove:旋转过程:Rotateend:旋转…

echarts3 -arcgis echarts.js修改

在echarts.js中修改修改 clone 方法其中 source instance of Array 修改为Object.prototype.toString.call(source) === '[object Array]’ 开头部分添加:var Geo = __webpack_require__(166);//166为Geo所在的编号(每个版本可能不一样)function ECharts (dom, theme, opts) {this.Geo = Geo; 需要将echart…

echarts.js 做图表的插件

<scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script> 查看网址:http://echarts.baidu.com/examples.html 具体自己的笔记代码.…

echarts.js（图表插件）2.0版会导致 ZeroClipboard.js（复制插件）失效，3.0版未知。

解决方法:ZeroClipboard.js先于echarts.js加载.…

Chrome下的语音控制框架MyVoix.js使用篇（四）

在上一篇博文中,我为大家介绍了myvoix.js中的smart learning模块,以及何如使用该功能.(myvoix.js的源码地址会在每一篇文章末尾放出) 文本将拓展 Chrome下的语音控制框架MyVoix.js使用篇(二) 中的实例(没看过的同学请猛戳链接),具象地介绍smart learning模块的使用.在之前的实例中,我们通过语音输入,让 Hello My Voix 标题变化成各种颜色, 并且通过预存指令来增加语音指令的识别率.在本文中将去除预存指令这一块,通过smart lea…

一款很便捷很实用的框架——vue.js

Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 什么是双向绑定?? Vue框架很核心的功能就是双向数据绑定.双向是指:HTML标签数据绑定到Vue对象,另外反方向数据也是绑定的. 通俗点说就是,Vue对象的改变会直接影响到HTML标签的变化,而且标签的变化也会反过来影响Vue对象属性的变化. […

图表工具--- ECharts.js学习（一）简单入门

ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 ECharts.js的特点这也是一款基于HTML5的图形库.图形的创建也比较简单,直接引用Javascript即可.使用这个库的原因主要有三点,一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 3:第二个是这个库的项目文档比较详细,每个点都说明的比较清楚…

前端测试框架对比(js单元测试框架对比)

前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类通常应用会有单元测试(Unit tests) 和功能测试(Functional tests),复杂大型应用可能会有整合测试(Integration tests). 其中: 单元测试:关注应用中每个零部件的正常运转,防止后续修改影响之前的组件. 功能测试:确保其整体表现符合预期,关注能否让用户正常使用. 整合测试:确保单独运行正常的零部件整合到一起之后依然能正常运行. 详细…

关于echarts.js 柱形图

echarts.js官网: http://www.echartsjs.com/index.html 这是我所见整理最详细echarts.js 柱形图博客: https://blog.csdn.net/qq_36330228/article/details/79945928 效果图如下代码如下 <!DOCTYPE html> <html> <head> <title>原文:https://blog.csdn.net/qq_36330228/article/d…

ECharts.js学习（一）简单入门

EChart.js 简单入门最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后台绑定. ichartjs 是一款基于HTML5的图形库.使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形. 支持饼图.环形图.折线图.面积图.柱形图.条形图等. Chart.js 也是一款基于HTML5的图形库和ichartjs整体类似.不…

ECharts JS应用：图表页面实现

因为要统计数据进行图表展示,所以就简单学习了 ECharts JS 的应用.它是一个纯Javascript图库,它依赖于一个轻量级的Canvas库 ZRender,并提供直观.生动.交互式和高度可定制的数据可视化图表. 其官网地址为:http://echarts.baidu.com 教程文档地址:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 应用 ECharts…

echarts.js多图表数据展示使用小结

echarts api文档: http://echarts.baidu.com/echarts2/doc/doc.html echarts demo示例: http://echarts.baidu.com/echarts2/doc/example.html echarts 使用五部曲: 1. 制作一个图表容器 <div id="main" style="height:400px;"></div> 2. 引入echarts.js文件 <s…

ECharts.js 简单示例

ECharts.js学习(一) 简单入门 EChart.js 简单入门最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后台绑定. ichartjs 是一款基于HTML5的图形库.使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形. 支持饼图.环形图.折线图.面积图.柱形图.条形图等. Chart.js 也是一款基于HTM…

Echarts.js使用

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.js"></script></head><body> <!-- 为ECharts准备一个具备大小…

ECharts.js学习（三）交互组件

ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol),颜色和名字.可以通过点击图例控制哪些系列不显示. xAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放左右两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠. yAxis:直角坐标系 grid 中的 y 轴,一般情况下…

ECharts.js学习（二）动态数据绑定

Echarts 数据绑定简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的.EChart.js对于数据异步读取这块提供了异步加载的方法. 绑定多组数据很多时候需要展示的数据不单单是一组数据,很多时候会进行一个数据对比.这个时候只需要在series中增加一组数据,legend中添加一下这个数据组的name <!DOCTYPE html> <html> <head> <title>ECharts.js…

echarts.js使用心得--demo

首先要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术. 废话不多时 , 直接开始. 第一步: 导入echarts.js文件下载地址:http://echarts.baidu.com/download.html <script type="text/javascript" src="hs/js/plug-in/js/echarts.min.js"></script> 第二步: 在页面上定义一个…

echarts.js中的图表大小自适应

echarts的图表,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所以div容器的高度宽度必须指定为px,这设计不知道是为啥. 于是自己采用了如下解决方案,直接贴代码了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie…

echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

一:错误描述:echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二:错误原因:echarts在用json数据请求时未调用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="shortcut icon" h…

从cocos2d-html5中提取出来的，用做前端开发的框架——cc.js

从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js /**************************************************************************** Copyright (c) 2010-2012 cocos2d-x.org Copyright (c) 2008-2010 Ricardo Quesada Copyright (c) 2011 Zynga Inc. http://www.cocos2d-x.org P…

用echarts.js制作中国地图,点击对应的省市链接到指定页面

这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2需要require加载模块.html中只需要用script引入echarts.js即可. 具体代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"…

【画报表框架——Echarts.js】的更多相关文章