位置: 编程技术 - 正文

详解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获取数据)

  • 单位的车辆车船税怎么交
  • 公司名下的房产过户到个人要交多少税
  • 个体户核定征收需要做账吗
  • 累计纳税工资是什么意思
  • 增资导致丧失控制权
  • 挂失的存单还有记录吗
  • 用于购买固定资产的账户
  • 期初数录错了怎么改
  • 企业月奖金发放制度
  • 对方已经认证的发票怎么作废
  • 增值税电子发票怎么作废
  • 增值税哪些可以全额抵扣
  • 土地使用权出让和划拨有什么区别
  • 非正常工资的个税是多少
  • 不符合规定(未带编码或编码选择错误)的发票,纳税人该怎么做?
  • 开具红字专票的步骤
  • 公司给员工定任务合法吗
  • 合伙企业分红是免税企业需要缴纳什么税
  • 建筑完税怎么计算
  • 返利计提分录
  • 以前年度的财务报表还可以找出来吗
  • 跨越红字专用发票开票流程
  • 收回物资的加工成本
  • 代理进口货物账务怎么处理
  • win10下载软件被阻止安装怎么办
  • mac怎么设置默认程序
  • 利息收入结转时怎么做账
  • 银行存款的利息收入计入什么科目
  • wordpress 常用函数
  • phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
  • 国税打印发票
  • 发票开具使用要求
  • 网上学电脑
  • 投资收益的核算依据
  • 开源 okr
  • java数组合并变字符串
  • ubuntu下安装windows
  • 多交增值税可以抵扣吗
  • 小规模免税怎么做账务处理
  • 资产减值损失如何计算
  • 现金存银行会有记录吗
  • 往来账款应该怎么记账
  • 已经认证抵扣的发票会计分录
  • 收到银行手续费已做后期收到发票怎么做
  • 挂靠在运输公司的车辆为什么要记入"固定资产"科目?
  • 免抵退税和留抵退税计算题
  • 财务报表现金流量表怎么填
  • 利息支出应计入什么科目
  • 费用转销是什么意思
  • 机动车销售折让红字信息表
  • 业务招待费纳税筹划
  • 企业凭证处理流程图
  • 民间非营利组织会计制度最新版
  • 如何做大建筑业企业
  • 有存货的公司
  • mysql优化技巧实战
  • sql server常规错误
  • MSSQL转MYSQL,gb2312转utf-8无乱码解决方法
  • xp安装声卡驱动
  • win2008远程桌面闪退
  • freebsd更新命令
  • ubuntu20.04最小化安装教程
  • ubuntu14.04启动不了
  • winxp系统怎么安装
  • win7应用程序无法正常启动
  • node定时任务框架
  • word-wrap在firefox中不起作用的解决方法
  • android floatbutton
  • jquery $each
  • python 线程教程
  • jQuery使用getJSON方法获取json数据完整示例
  • JavaScript window.setTimeout() 的详细用法
  • 借助FileReader实现将文件编码为Base64后通过AJAX上传
  • Python线程进程协程
  • 建筑施工税务处理
  • 河南地税网上税务局
  • 深圳电子税务局app
  • 不予处理的法律依据
  • 加油账单怎么查询
  • 四川社保2020增资方案
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设