echarts 总结

Echarts

  1. Echarts 相关文档

0.1 官网

http://echarts.baidu.com

0.2 配置项

http://echarts.baidu.com/option.html

0.3 API

http://echarts.baidu.com/api.html

  1. 一些常用的配置项

2.1   title 设置图表的标题

2.2   tooltip 图表上的提示框

其中,有一个formatter配置项,可以配置显示的内容,具体的配置方法,参考上面的文档

2.3   legend 图例

其中的 data 的配置,每一项代表一个系列(series)的 name,name必须完全相同

2.4   toolbox 五种类型的工具

导出图片数据视图动态类型切换数据区域缩放重置

2.5   grid 网格

直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图柱状图散点图(气泡图)

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件,在 ECharts 3 中可以存在任意个 grid 组件。

2.6   xAxis  x轴

直角坐标系 grid 中的 x 轴,单个 grid 组件最多只能放上下两个 x 轴。

关键属性:

Type: 坐标轴类型。

Position: 坐标轴所在的位置,

2.7   yAxis  y

直角坐标系 grid 中的 y 轴,单个 grid 组件最多只能放左右两个 y 轴。

2.8   series  系列列表。

每个系列通过 type 决定自己的图表类型,不同的图表类型,其配置项也有所不同,具体的配置项,参考文档:http://echarts.baidu.com/option.html#series

  1. 3.       echarts 中的几个重要对象及实例化过程

3.1   echarts 对象

全局 echarts 对象,在 script 标签引入 echarts.js 文件后获得。

常用的方法:init

echarts.init:  创建一个 ECharts 示例,返回echartsInstance,不能再单个容器上初始化多个 ECharts 实例。

3.2   echartsInstance 对象

通过 echarts.init创建的实例。

   常用方法:setOption

方法签名:

方法作用:

设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

参数含义:

  1. option

图表的配置项和数据,具体见配置项手册

  1. notMerge

可选,是否不跟之前设置的option进行合并,默认为false,即合并。

  1. notRefreshImmediately

可选,在设置完option后是否不立即刷新画布,默认为false,即立即刷新。

  1. echarts3 中地图的使用

echarts3 的js 实现中并没有将地图数据集成进去,所以当使用地图时需要,单独引入地图数据,地图数据的下载:http://echarts.baidu.com/download-map.html

引入地图的代码:

<script src="echarts.js"></script>

<!—引入地图数据 –>

<script src="china.js"></script>

<script>

var chart = echarts.init(document.getElementById(‘main‘));

chart.setOption({

series: [{

type: ‘map‘,

map: ‘china‘

}]

});

</script>

  1. echarts 特性

echarts 的配置项非常多,非常灵活,需要注意的是,在某些情况下,大多数配置项都是可选的,但是,有些配置项则是必须的,然而, echarts 在某些必须缺失的情况下,仍然能够将图表显示出来,此时就会出现一些问题,例如,注册事件不会成功,这些问题非常隐蔽,找起来非常麻烦,所以一定要注意。例如:当series 是 map 的的时候,如果,其 data 字段没有值,地图仍然会正常显示,但是tooltip 就无法显示了,同时,这时注册事件时,就不会成功。

时间: 2024-10-27 19:34:15

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

echarts对每个data[i]的图片添加点击事件

1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", function (param){ alert(param.dataIndex+':'+option1.series[0].data[param.dataIndex].name); }); 2.效果图 3.目录结构 4.<head></head>和<body></b