ECharts演习(一)

前几天小组讨论,窗外的麻雀在电线杆上多嘴,想想很有夏天的感觉,手中的铅笔在纸上来了又回,我用几行字形容孰是孰非.........

Echarts使用指南

百度网站:http://echarts.baidu.com/

首先说下该网站上的简介,API已经很详细了,down下来发布下,在项目中就几乎已经完成了60%。

这里只说我的学习思路:

由于echarts依赖底层zrender,你需要同时下载zrender到本地,方便zrender的API的查询。

下载总结:

ECharts下载地址: http://echarts.baidu.com/

ZRender下载地址:http://ecomfe.github.io/zrender/index.html

ECharts:

ZRender:

其次,HelloWorld:

API中提供了两种引入方式,即:模块化单文件引入(推荐);标签式单文件引入。

时间: 2024-08-08 09:35:00

ECharts演习(一)的相关文章

沫沫金Echarts移动端demo

鄙视百度!!! 官网给的Demo支持自动大小,确不给完整的源码XXX 自己动手,丰衣足食 http://echarts.baidu.com/demo.html#bar-tick-align 用最基本的柱状图官网代码 简单两步,实现移动端自适应大小 //1.下载Echarts <script src="dep/Echarts/echarts-all-3.js"></script> //2.chart容器宽度自适应 <!-- 为ECharts准备一个具备大小(

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式.其中最简单直接,形象明了的就是用图表说明问题了. 如果在以前,要实现各种图表,可能很多人会选择flash.但是flash成本较高,图表多的时候很耗性能.后来越来越多的纯js框架出现,让大家有了更多的选择.所以接下来我想推荐几个不错的图表js框架给大家用.

echarts高级使用

上一篇文章中介绍了echarts中柱状图的使用,从demo中我们可以看到不管是柱状图还是饼状图或者是折线图,都是导入js,准备option参数.为了使用方便我们下一步要做的就是封装了. 我们把图形类型和图形数据与图形显示分离开来,封装独立的js文件,只要传给他图形类型参数和图形数据参数就能显示出对应的图形,这样就不会出现太多的冗余代码.接下来我们说封装js文件. 是柱状图封装柱状图的js饼状图封装饼状图的js呢,还是所有的图形封装成一个js呢?如果我们单独封装,就把option内容中变化的图形数

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

Echarts字体和线条颜色设置操作笔记

这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧.我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码.这样更方便阅读及读者知道,是否对自己有所帮助,其重点是如何在模板动态网页或JSP网站中插入Echarts图片.        1.修改标题及背景颜色    2.设置柱形图颜色 3.修改坐标轴字体颜色        4.设置Legend颜色 5.修改折线颜色    6.修改油表盘字体大小及颜色 7.柱状图文本鼠标浮动上的颜色设置

Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据

在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts()调用的函数的最底部即可 1 var ecConfig = require('echarts/config'); 2 myChart.on(ecConfig.EVENT.HOVER

使用百度echarts画图表的步骤

1.百度echarts是一个很好用的图表工具,可以将一些数据很形象直观的展示出来,下面看一下简单的使用. 2.首先引用echarts.js 具体文档可以参考官网: http://echarts.baidu.com/tutorial.html 里面讲的很详细.而且官网也有很多的实例供我们参考. 3.引入echarts之后需要一个容器: 1)准备容器 这个容器就是将我们的数据在里面展示出来. 2)初始化echarts实例: var myCharts =  echarts.init(document.

使用angular封装echarts

Echarts是一个开源的图表组件,图表比较丰富,工作中需要用到它来搭建一个数据展示系统.但是系统原有的框架是基于angular的,而echarts是基于原生js的,如果直接使用的话就丢失了angular双向绑定的优势,而且后续代码不好维护,所以需要将echarts封装成一个通用的angular组件. echarts原生实现如下: <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:4

【ECharts】SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

1导入包,搭建SSH框架. 导入JQuery的JS包,<script src="JS/jquery-1.7.1.js"></script> 导入ECharts的包.<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> 前提你的SSH已经搭好了,数据已经传递到了Struts层. 2在Action层,将数据封装成J