ECharts v4.2.1 rc1 商业产品图表库 源码下载

来源:脚本之家  责任编辑:小易  

数据都是通过sql语句排序的1.Echarts柱状图的正常配置注:声明了 myChart、test这两个都有用官方示例中myChart是声明在 function(ec)里面的script>baidu.com/build/dist/echarts.js"></script>var myChart;var test=10路径配置require.config({paths:{echarts:'http://echarts.baidu.com/build/dist'}});使用require'echarts','echarts/chart/bar'/使用柱状图就加载bar模块,按需加载function(ec){基于准备好的dom,初始化echarts图表myChart=ec.init(document.getElementById('divProgress'));var option={tooltip:{show:true},animation:false,legend:{data:['销量']},xAxis:{type:'category',data:["衬衫www.zgxue.com防采集请勿采集本网。

源码大小:24.9MB 源码语言:简体中文 源码类型:国产软件 源码授权:免费软件 更新时间:2019-01-25 17:01:25 源码类别:jsp其它 源码官网: 官方网址 网友评分:源码评分 应用平台:JSP

ECharts (Enterprise Charts 商业产品图表库)

固定设置y轴最大值:max:1000, 或者动态放大上下限的值;yAxis中先设置 minInterval:1,再设置 boundaryGap:[0,0.1], boundaryGap是坐标轴两端空白策略,数组内数值代表百分比, [原始数据最小值

提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现。

1、打开echarts官方实例页面,点击第一个折线图。2、进入页面后,可以看到数据比较少,所以横坐标文字全部都显示出来了。3、修改左侧的option内容,在xAxis的data数组中再添加两行内容,同时,在

Echarts device

\"dataZoom\":[{ show\":true, height\":30, xAxisIndex\": 0 bottom:30, start\":10, end\":80, handleIcon:'path:/M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.

Echarts explorer

echarts X轴数据太多间隔显示,tooltip让全部显示的方法: 1、不要使用默认的tooltip了,可以对应写一个label记录值, 2、然后控制它的display:block/none 可以试一下, 3、用一个公有的静态

支持IE6/7/8/9+,chrome、firefox、safari、opera

1、在BusinessJs/echarts.js中引用echarts及zrender: require.config({ packages: { name:'echarts', location:'./echarts/src', main:'echarts' }, { name:'zrender', location:'./zrender/src',/

(IE8- power by excanvas )

特色

我们诚挚邀请你翻阅这份在线文档 《 Why ECharts ? 》 你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。

*文档中展现的个别特性在IE8-中并没有得到支持,所以建议使用IE9+、chrome、safari、firefox或opera等现代浏览器阅读这份文档。

Echarts mix

混搭

混搭的图表会更具表现力也更有有趣味,ECharts提供的图表(共11类17种)支持任意混搭:

折线图(面积图)、柱状图(条形图)、散点图(气泡图)、K线图、

饼图(环形图)、雷达图、地图、和弦图、力导布局图、仪表盘、漏斗图。

混搭情况下一个标准图表:包含唯一图例、工具箱、数据区域缩放、值域漫游模块,一个直角坐标系(可包含一条或多条类目轴线,一条或多条值轴线,最多上下左右四条)

拖拽重计算

拖拽重计算特性(专利)带来了数据统计图表从未有过的用户体验,允许用户对统计数据进行有效的提取、整合,甚至在多个图表间交换数据,赋予了用户对数据进行挖掘、整合的能力。

Echarts 拖拽重计算

Echarts 数据视图

数据视图

如果你所呈现的数据足够让用户所关心,那么他们将不满足于查看可视化的图表,要去逐一迎合他们下载保存,数据分享,加工整合已有数据等等需求?

或许你只要给予一个“,”分隔的数据文本他们就懂了,这就是ECharts的数据视图!当然,你可以重载数据视图的输出方法,用你独特的方式去呈现数据。

如果你的用户足够的高端,你甚至可以打开数据视图的编辑功能,跟拖拽重计算相比,这可是批量的数据修改!

动态类型切换

很多图表类型本身所表现的能力是相似的,但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样,比如折线图和柱状图的选择,系列数据是堆叠还是平铺总是让人头疼。

ECharts提供了动态类型切换,让用户随心所欲的切换到他所需要的图表类型和堆叠状态。

Echarts 动态类型切换

Echarts 图例开关

图例开关

多系列数据的同时展现呈现出丰富内容,但如何让用户切换到他所关心的个别系列上?

ECharts提供了方便快捷的多维度图例开关,可以随时切换到你所关心的数据系列。

数据区域选择

数据可以是无限的,但显示空间总是有限的,数据区域选择组件提供了大数据量中漫游的能力,让用户选择并呈现他所关心的数据区域。

配合随动的均值(极值)标线,标注展现强大的数据剖析能力。 try this 》

Echarts 数据区域缩放

Echarts 多图联动

多图联动

多系列数据在同一个直角系内同时展现有时候会产生混乱,但他们又存在极强的关联意义不可分离?

ECharts提供了多图联动的能力(connect),能做的可不仅仅是鼠标划过的详情显示,连接的多个图表会共享组件事件并且实现了保存图片时的自动拼接。 try this 》

值域漫游

基于坐标的图表(如地图、散点图)通过色彩变化表现数值的大小能直观形象的展示数据分布。

但如何聚焦到我所关心的数值上?我们创造了称为值域漫游的功能,让你可以轻松进行数值筛选。

Echarts 值域漫游

Echarts 炫光特效

炫光特效

我们知道,很多时候我们需要一些吸引眼球的能力。

ECharts支持标注标线的炫光特效,特别用在地图上轻松实现百度迁徙数据可视化特效

大规模数据模式

如何展现成千上百万的数据?貌似除了用专业的统计工具(如MATLAB)外别无选择?

不,在拥有如此多交互特性下ECharts依然可以做到直角系图表(折、柱、散点、K线)20万数据秒级内渲染完成,这对于常规的应用,用现代浏览器就足以轻松展现百万规模的数据!

Echarts 大规模散点图

Echarts 动态数据添加 Echarts 动态数据添加

动态数据添加

如果你需要展示有实时变化的数据,相信这个动态接口会对你很有帮助。

标线辅助

趋势线?平均线?上升通道?支持位?专业的你自然知道该怎么用

提供标线辅助在K线图中可是必要的功能!当然,ECharts中的任何图表都可以使用。

Echarts 标线辅助

Echarts 多维度堆积

多维度堆积

支持多系列,多维度的数据堆积,配合自动伸缩的图形实体和直角坐标系,能呈现出更有内涵的统计图表~

子区域地图模式

地图类型支持world,china及全国34个省市自治区。同时支持子区域模式,通过主地图类型扩展出所包含的子区域地图,轻易输出全球176个国家地区和全国600多个省市区域简图, try this 》

Echarts 子区域地图

Echarts 标准GeoJson扩展

GeoJson地图扩展

内置地图由标准GeoJson地理数据并经过高效的压缩算法压缩生成的地图数据(大小仅为标准geoJson的30%左右)驱动而来。如果内置地图类型或数据如果并未满足你的项目需要,可通过简单动态注册产生你所需要的新类型, try this 》

标注 & 标线

添加额外的标注内容是常用的功能,如地图上标注某些特定位置,折线图上标注极值点或者柱形图里标线出变化趋势,ECharts全系列图表支持标注标线功能,并且与生俱来的可以响应图例开关、值域漫游等组件的交互功能。

Echarts 全系列图表支持标注、标线 Echarts 全系列图表支持标注、标线

Echarts 多级控制 Echarts 高度个性化

个性化定制

超过600个可配置选项结合多级控制设计满足高度定制的个性化需求。

详细文档 »

事件交互

可以捕获的用户交互和数据变化事件实现图表间或者与外界的联动。try this »

事件调试try this »

Echarts 事件交互

Echarts 百搭时间轴

百搭时间轴

时空数据分析是信息可视化里一个相当重要的方向!ECharts提供可与任意图表搭配使用的时间轴控件以展现时空数据变化。

ECharts 更新日志:

v4.2.1.rc1

[Fix] 修复了文本缓存的问题。

[Fix] 修复了在一些情况下事件处理器中重新 setOption 时抛异常的问题。

[Fix] 修复了 geo 中 showTip 异常的问题。

[Fix] 修复了一些情况下堆叠柱状图超出直角坐标系范围的问题。

[Fix] 修复了图例组件(legend)当空间只够显示一项时不能翻页的问题。

[Fix] 修复了饼图标签(label)定位在中心时,在一些角度下有便宜的问题。

[Fix] 修复了地图坐标系(geo)在 MS Edge 下不能拖动的问题。

[Fix] 修复了地图系列(series.type: 'map')标签不能显示的问题。

[Fix] 修复了设置了 visualMap: false 的数据项影响其他数据项的问题。

[Fix] 使得 axis.type: 'category' 且 axisLabel.interval: 0 时,所有标签(axisLabel)都能被显示。

下载地址如下:

四五互联移动下载

群英网络电信下载

巨牛网络电信下载

创梦网络电信下载

酷云中国网通下载

亿恩科技电信下载

万达网络电信下载

徐州枫信网通下载

360集群电信下载

酷云中国电信下载

云彩网络双线下载

腾正科技电信下载

微子网络电信下载

最近有个朋友问了这样一个关于ECharts图表组件的问题,他想在一个页面内创建多个图表,不知道该如何做。最大的问题可能是受到了require([],function(){});的阻碍吧。其实require无非就是一个模块化加载借用其回调函数去创建图表对象。所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。一个页面内创建多个ECharts图表示例效果图呈现想要在一个页面创建多个图表对象需要准备如下几个条件,也可以说是注意事项:1、想要创建几个图表对象就需要预先设置多少个图表容器图表容器作为图表的载体,所以是必须的,且必须指定每一个容器的width和height为非零,否则会产生图表无法呈现的结果。width:500px;float:left;border:1px solid#ccc;padding:10px;width:500px;float:left;border:1px solid#ccc;padding:10px;这里准备了两个容器。2、引入相关的js文件script>script>3、编写好创建不同图表对象的方法1)、创建一个柱状图的函数创建ECharts柱状图图表function DrawColumnEChart(ec){柱状图-var myChart=ec.init(document.getElementById('main'));图表显示提示信息myChart.showLoading({text:"图表数据正在努力加载.});myChart.hideLoading();myChart.setOption({title:{text:"柱状图},tooltip:{trigger:'axis'},legend:{data:['stepday.com','tuiwosa.com']},toolbox:{show:false},calculable:true,xAxis:{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}yAxis:{type:'value',splitArea:{ show:true }}series:{name:'stepday.com',type:'bar',/序列展现类型为柱状图data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},{name:'tuiwosa.com',type:'bar',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]}});var ecConfig=require('echarts/config');ECharts图表的click事件监听myChart.on("click",function(){alert("你点击我了!});}2)、创建折线图的函数创建ECharts折线图图表function DrawLineEChart(ec){折线图-var myLineChart=ec.init(document.getElementById('mainLine'));图表显示提示信息myLineChart.showLoading({text:"图表数据正在努力加载.});myLineChart.hideLoading();myLineChart.setOption({title:{text:"折线图},tooltip:{trigger:'axis'},legend:{data:['stepday.com','tuiwosa.com']},toolbox:{show:false},calculable:true,xAxis:{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}yAxis:{type:'value',splitArea:{ show:true }}series:{name:'stepday.com',type:'line',/序列展现类型为折线图data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},{name:'tuiwosa.com',type:'line',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]}});var ecConfig=require('echarts/config');ECharts图表的click事件监听myLineChart.on("click",function(){alert("你点击我了!});}4、封装一个统一调用创建不同图表的函数将画多个图表的进行函数封装function DrawCharts(ec){DrawColumnEChart(ec);DrawLineEChart(ec);}5、结合模块加载函数require(requireArr,callbackFunction)创建图表对象require'echarts','echarts/chart/bar',/按需加载图表关于bar图的部分'echarts/chart/line'/按需加载图表关于线性图的部分DrawCharts6、特别提醒1)、创建不同图表对象的时候需要注意方法内部关于init()初始化图表方法的时候其id要与需要状态当前图表容器id保持一致。7、完整示例代码DOCTYPEhtml>html lang="en">ECharts-基本线性图script>script>width:500px;float:left;border:1px solid#ccc;padding:10px;width:500px;float:left;border:1px solid#ccc;padding:10px;STEP DAY我们只提供最直接、最具价值的信息,旨在:<a href="http://www.stepday.com/myblog/?echarts" target="_blank">www.stepday.com</a>Step:4 require echarts and use it in the callback.Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径require'echarts','echarts/chart/bar',/按需加载图表关于bar图的部分'echarts/chart/line'/按需加载图表关于线性图的部分DrawCharts将画多个图表的进行函数封装function DrawCharts(ec){DrawColumnEChart(ec);DrawLineEChart(ec);}创建ECharts柱状图图表function DrawColumnEChart(ec){柱状图-var myChart=ec.init(document.getElementById('main'));图表显示提示信息myChart.showLoading({text:"图表数据正在努力加载.});myChart.hideLoading();myChart.setOption({title:{text:"柱状图},tooltip:{trigger:'axis'},legend:{data:['stepday.com','tuiwosa.com']},toolbox:{show:false},calculable:true,xAxis:{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}yAxis:{type:'value',splitArea:{ show:true }}series:{name:'stepday.com',type:'bar',/序列展现类型为柱状图data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},{name:'tuiwosa.com',type:'bar',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]}});var ecConfig=require('echarts/config');ECharts图表的click事件监听myChart.on("click",function(){alert("你点击我了!});}创建ECharts折线图图表function DrawLineEChart(ec){折线图-var myLineChart=ec.init(document.getElementById('mainLine'));图表显示提示信息myLineChart.showLoading({text:"图表数据正在努力加载.});myLineChart.hideLoading();myLineChart.setOption({title:{text:"折线图},tooltip:{trigger:'axis'},legend:{data:['stepday.com','tuiwosa.com']},toolbox:{show:false},calculable:true,xAxis:{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}yAxis:{type:'value',splitArea:{ show:true }}series:{name:'stepday.com',type:'line',/序列展现类型为折线图data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},{name:'tuiwosa.com',type:'line',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]}});var ecConfig=require('echarts/config');ECharts图表的click事件监听myLineChart.on("click",function(){alert("你点击我了!});}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • echarts 怎样在一个页面显示多张图表
  • echarts怎么设置数据自动排序
  • 如何echarts的legend中,鼠标移过去后会出现数据展示的明细提示
  • echarts4如何设置折线图只显示最大值数值
  • Echarts怎么改变yAxisY轴坐标的数值,或是能不能自己写一个呢
  • echarts 图例之间的间距怎么设置
  • 如何用代码控制ECharts的dataZoom
  • echarts X轴数据太多间隔显示,tooltip能不能全部显示
  • 怎么样让ECharts从后台获取数据并展示
  • echarts是做什么的?
  • 网站首页源码下载asp源码php源码.net源码jsp源码软件开发脚本下载js框架网站地图网页游戏黑客源码数据库类其它源码整站系统博客程序留言聊天企业网站新闻文章ajax相关搜索链接文件管理交友会员上传下载投票调查框架模板整站系统新闻文章留言聊天博客系统贺卡图片ajax相关文件管理问答系统社区论坛上传下载整站系统控件组件新闻文章主机域名计数统计小偷采集电子商务学校班级 社区论坛上传下载投票调查blog程序留言聊天整站系统社区论坛上传下载投票调查数据管理jsp其它c#源码易语言源码delphi源码vb源码java源码其它菜单导航tab标签焦 点 图在线客服css特效相册代码flash特效批处理其它jqueryextjsprototypemootoolsajax/javascript其它框架主页源码下载jsp源码jsp其它一起鼎oa办公系统软件 v2.0wts在线答题系统 v0.3.0html+js上传图片源码下载 v1.0 免费版后台整合包精简版(servlet_dbc) v2.0jspgou网店系统 v6.1.1 店中店版echarts全彩种彩票网站源码 v2.0全彩种彩票网站源码 v2.0下载e鹰jsp新闻发布系统e鹰jsp新闻发布系统下载javashop 开源网店系统 v3.0 beta2 javashop 开源网店系统 v3.0 beta2 下载比较简单的js日历插件 网页日历 v1.01比较简单的js日历插件 网页日历 v1.01下载enews jsp 新闻发布系统 v1.0(jsp+mysql)enews jsp 新闻发布系统 v1.0(jsp+mysql)下载echarts v4.2.1 rc1 商业产品图表库echarts v4.2.1 rc1 商业产品图表库下载jsp视频播客管理系统 v2.0 jsp视频播客管理系统 v2.0 下载 projectforge 基于web的项目管理系统 v6.14.0 projectforge 基于web的项目管理系统 v6.14.0下载北雨jsp求职招聘系统 v2.5.2 北雨jsp求职招聘系统 v2.5.2 下载找不到分享码?一起鼎oa办公系统软件 v2.0wts在线答题系统 v0.3.0html+js上传图片源码下载 v1.0 免费版后台整合包精简版(servlet_dbc) v2.0jspgou网店系统 v6.1.1 店中店版angularjs web页面框架 v8.0.0 rc3jpress v3.0 alpha.1 双鱼林jsp商品进销存系统 v1.0angularjs web页面框架 v7.2.16ember.js v3.17.1 开源javascript客户端框架分享码的获取方法迅雷winrar v5整站系统社区论坛上传下载投票调查数据管理jsp其它一起鼎oa办公系统软件 v2.0angularjs web页面框架 v9.1.0ember.js v3.17.1 开源javascript客户端框架jpress 开源精品模板 v3.2.0wts在线答题系统 v0.3.0ionic html5 开源移动应用框架 v5.0.0 beta5 angularjs web页面框架 v7.2.16jpress v3.0 alpha.1html+js上传图片源码下载 v1.0 免费版ember.js v3.11.0 beta2chrome
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved