位置: 编程技术 - 正文

详解ECharts使用心得总结(echarts.on)

编辑:rootadmin

推荐整理分享详解ECharts使用心得总结(echarts.on),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echart用法,echarts常用方法,echarts.on,echart怎么用,echart用法,echarts应用,echarts的用法,echarts常用方法,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

上周项目组要临时给客户做一个演示的原型,首页设计的是一个中国地图,本来打算用谷歌的地图,但是,做出来之后,整体的效果看起来太差了,最后就在网上搜相关的地图呈现的控件,然后就找到了这个ECharts报表呈现组件,挺不错的一个组件,而且地图数据都是离线的,真心很赞。但是,使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。

1. 插件的下载

以下是ECharts的下载链接,需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要ZRender的,但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现,建议大家在下载ECharts时同时也要下载ZRender。

ECharts下载地址:

ZRender:

2. 插件的引用

首先,新建一个Web应用程序,然后添加刚刚下载的文件,具体的目录结构如下:

这里有以下几点需要说明:

1、所有的跟ECharts有关的文件全部都在echarts文件夹下

2、echarts文件夹的内容分为两部分

1) 一部分是以echarts开头的js文件,这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件,也就是1.中的图中红框标注的js下的文件。如下:

2) 另一部分是一个名为zrender的文件夹,这里需要特别注意的是该文件夹的命名必须为zrender,因为在echarts的js文件中对zrender的引用都是以zrender为根目录的,zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容,如下:

详解ECharts使用心得总结(echarts.on)

3. 在页面中的具体使用

按照上边的步骤配置过之后,我们就可以在页面中引用了,这里我主要是演示地图控件的使用方式,因为地图的引用跟其他的基本图形的引用不太一样。其他的图形的呈现也会做一个简要的演示。

3.1 MapChart

首先在跟2中的echarts文件夹同一个目录(也就是Modules文件夹)下添加一个aspx页或html页,需要注意的是,如果是在aspx页中使用echarts时,需要把要渲染的div放在form标签之外,否则图形是显示不出来的。

3.1.1 在head标签中添加对echarts的引用如下:

3.1.2 在body标记中,form标记之外,添加一个div,用来做图表渲染的容器。如下:

3.1.3 在3.1.3中添加的div标记下,添加如下的js代码段,如下:

3.1.4 完成以上操作之后,效果如下图所示:

3.2 LineChart

除了地图图表之外的其他的图标的使用方式都差不多。事实上其他的图表跟地图图表的区别在于对配置文件的引用。这里只做一个折线图的示例,其它的示例都是一样的。

3.2.1 跟3.1.1一样,引入echarts脚本

3.2.2 跟3.2.2一样,添加渲染图表的div容器

3.2.3 在3.2.2添加的div下添加如下js代码块

3.2.4 完成以上操作之后效果图如下:

好了,今天就总结到这里了,希望能给大家带来一些帮助。这里主要是介绍地图控件的使用,因为其官方文档上关于路径的配置写的很不清楚,所以才会想把这些走的弯路给总结一下。对于其他的图表控件的使用都很简单,大家可以参考官方的文档。

jQuery EasyUI 获取tabs的实例解析 左边tree,右边tabs。点击tree增加相应的tabsfunctionaddtabs(node){varstart=;varend=;if((‘#tt').tabs(‘exists',node.text)){(‘#tt').tabs(‘select',node.text);(‘#tt').tabs(‘select',n

手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效 HTML5Canvas的幸运大奖盘特效现在好的微信微商或者微信公众号都有这种大转盘的项目,这里就整理一个,可以参考下。这是一款基于jquery和HTML5Canvas的幸

关于 jQuery Easyui异步加载tree的问题解析 想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bughtml中代码是这样的ulclass="easyui-tree"id="tt"/uljs中的代码$(".next-menu:nth-child(1

标签: echarts.on

本文链接地址:https://www.jiuchutong.com/biancheng/376324.html 转载请保留说明!

上一篇:jQuery实现删除li节点的方法(jquery删除所有class)

下一篇:jQuery EasyUI 获取tabs的实例解析(jquery获取数据)

  • 小微企业所得税费用怎么算
  • 2023年小规模物业公司物业费税率
  • 火车票可以抵扣多少增值税
  • 其他综合收益属于损益类科目吗
  • 全年交多少税可以退
  • 累计个税是每年累计吗
  • 抄税报税清卡怎么操作流程
  • 取消待摊费用科目
  • 普通发票没有明细可以吗
  • 金蝶迷你版会计科目代码格式
  • 存根联给了客户怎么办
  • 计税金额是含税还是不含税
  • 开票报税是什么意思
  • 购买金税盘需要带什么
  • 个体工商户注销后的责任承担问题
  • 企业将重组债务转为权益工具
  • 应收账款平均占用资金的变动额
  • 不得抵扣的进项税额转出会计分录
  • 资源税征税范围有哪些
  • 材料成本差异结转借贷方向
  • 城市生活垃圾处理收费管理办法
  • 应收账款少收的款分录
  • 预付货款工程完工后如何结转?
  • 房地产计税毛利率什么意思
  • 有开发票就要交印花税吗?
  • 发票虚开税务局要求补税怎么办?
  • 印花税核定表申请
  • 怎样冲回多提应付职工薪酬?
  • 公司开设食堂需要哪些手续
  • 应纳税所得额计算个税
  • 稽查查补税款怎么计算企业所得税
  • 农民工劳动报酬权救济制度存在的问题
  • 怎么隐藏单元
  • 施工机械保险费属于什么费用
  • yolov3 改进
  • mxnet github
  • 莫纳皮拉
  • 哪些发票是成品发票
  • node .js
  • uniapp自定义导航栏渐变
  • 实际成本法核算方法
  • 小规模纳税人的企业所得税怎么算
  • 利润表上期数指的是什么
  • 现金银行本票的签发人是谁
  • opencv python
  • mongodb项目使用说明
  • 增值税纳税申报类型怎么填
  • 边际贡献分析法案例
  • mysql用户权限详解
  • 重复报销怎么写情况说明
  • 分支机构注销后往来账如何处理?
  • 从厂家直接拿货需要什么条件
  • 非居民企业境内所得
  • 红字冲销表示负数吗
  • 农业免税企业开票有限额吗
  • 加计扣除要交企业所得税吗
  • sql汇总查询
  • win8如何快速启动
  • red hat linux怎么用
  • explorer.exe进程出错
  • 手机如何使用windows
  • win10怎么把中文系统改成英文
  • windows 8升级
  • 角色格斗类游戏
  • UNITY开发工程师
  • opengl 2
  • opengl编程实例
  • js按照指定顺序排序
  • python随机数代码
  • jquery自定义事件
  • unity rpg插件
  • jquery判断是否有某个class
  • 个税更正申报后,少缴纳的税款如何退回
  • 税控盘抄报反写工作难度
  • 贵州省增值税普通发票图片
  • 廉租房取消之后有什么补贴
  • 纳税申报逾期怎样补报?
  • 宁波税务局qzzn
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设