带你ECharts入个门

首先导入相应的 js :
echarts.min.js
china.js(需要显示中国地图才导入这个)
相关js下载(上传百度云太麻烦,没积分的小伙伴可以联系我私发 ^-^)

完成一个简单的ECharts报表,简单总结就这几步:
1、在需要显示图表的地方定义好 div 并给定宽高,注意在初始化之前一定要给定宽高,否则即使代码正确最后也不会显示。
2、初始化 div 容器:var mycharts = echarts.init(document.getElementById(“xxx”));
3、定义样式(折线图、柱状图、饼图、散点图等),自己不会写代码可以直接去官网找,官网也提供在线编辑的功能,可以调试后直接复制到代码中。根据官网上的例子只要正确获取后台的数据保证格式正确填入相应的位置即可。
4、将容器与样式结合:mychart.setOption(option);
  ps:括号里的 option 就是步骤三中定义样式的变量名。


例:

<script>
    var mycharts = echarts.init(document.getElementById("xxx"));
    var option = {
        //...
    };
    mycharts.setOption(option);
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本模块源码托管于coding的git服务器上 源码及最新模块、示例下载:https://coding.net/u/lsy9202/p/E-echarts/git echarts的大名如果没有听过可以去百度一下,它是一个企业级的开源图表库,百度公司前端部研发开源,它是一个web图表库,所以在 易语言 中使用需要浏览框(浏览器)的支持,echarts的好处在于它有最全面的全中文api文档,支持多种多样的图形及配置,例如散点图、折线图、柱状图、饼图、地图、雷达图、K线图、箱线图、热力图、关系图、矩形树图、平行坐标、桑基图、漏斗图、仪表盘等等。 虽然这些年越来越不喜欢百度了,但是百度的echarts还是强烈安利的,少有的良心之作,国内外闻名。 echarts官网:http://echarts.baidu.com/ 官方中文API文档:http://echarts.baidu.com/option.html 超多官方示例大全:http://echarts.baidu.com/examples.html github:https://github.com/ecomfe/echarts QQ讨论群:93902676(使用遇到问题解答、最新模块、示例下载) 由于模块和示例大全更新快,所以建议加群免费下载最新版,以免出现问题。 ' 更新日志: ' v1.6.0.241 [2018/11/24] ' * 1.以echarts类形式重写模块架构,并将echarts图形分为框架类和图形类,以便分别控制。 ' ....新架构最大限度保留了原模块支持一框多图、多框多图、所有json参数可自定、图形组件可模块式控制等优点。 ' ....新架构最大限度的将json内容保留在echarts类之内,从图形创建到图形绘制全程无需关心json内容(当然依旧保留了json可导出、可自定义修改等特点)(感谢群友:待伊一生@噜阿噜ita 提醒)。 ' ....统一调整了命令名称及部分参数,以便可以更方便的调用想要的命令。 ' ....添加封装了大量常用的js命令,常用操作运行图形、异步刷新图形数据等等无需再自行手写js代码。 ' ....折线、柱图、散点图、K线图封装了数据异步调用的方法(数据写入js引擎,使用js变量名调用数据),大数据时可以大幅度减少json生成和图形绘制时间。 ' ....此版本调整重写幅度过大,改动及新特性就不一一明列,请自行探索,有问题请及时反馈群:93902676。 ' * 2.修正‘设置组件_图例()’命令无法自动获取饼图的图例问题。 ' * 3.添加了新组件支持“视觉映射”,命令:设置组件_视觉映射()。 ' * 4.添加了大量常用图形配置参数。 ' * 5.内置json类修复嵌套数组赋值失败的问题(感谢群友:CaptainChen提醒)。 ' * 6.更新echarts.min.js文件至当前最新版v4.2.0.rc2[2018-10-15](详细更新日志:http://echarts.baidu.com/changelog.html ) 1.6版最新特性: 使用echarts类的形式重写模块架构,并将echarts图形分为框架类和图形类,以便分别控制。 新架构最大限度保留了旧版本模块的支持一框多图、多框多图、json参数自定、组件化控制图形等优点。 新架构最大限度的将图形配置json保留在echarts类之内,不熟悉json的新手从图形创建到图形绘制全程无需关心json内容(当然依旧保留了json可自定修改、可导出、可导入等等特点) 统一调整了命令名称和部分参数位置,以便使用更简便。 新架构封装了大量常用js命令,例如操作运行图形、异步刷新图形等等操作无需再自行手写js代码了。 折线、柱图、散点图、K线图封装了数据异步调用的方法(原理:数据写入js引擎,使用js变量名调用数据),大数据时可以大幅度减少json生成和图形绘制时间。 所有命令添加了英文名词注释,可以用来快速对照官方api文档。 下边开始放大招了,多图预警 【注意:下边的示例图只是echarts能力的冰山一角,官网上的成千上万的图形都能拿来用】 点此查看其它版本

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值