博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Echart:前端很好的数据图表展现工具+demo
阅读量:6306 次
发布时间:2019-06-22

本文共 786 字,大约阅读时间需要 2 分钟。

官网:  http://echarts.baidu.com/index.html

通过一个简单的小Demo介绍echart的使用:demo均亲测可以运行

demo1:

1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。

    
ECharts

2、新建<script>标签引入模块化单文件echarts.js

    
ECharts

 

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)

    
ECharts

4、<script>标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成

    
ECharts

5、浏览器中打开echarts.html,就可看到以下效果

如果需要不同形式的图标,只更换option就可以了。

demo2:展示了更换option的图标。

1.代码:

    
ECharts

2.浏览器效果:

 

 

更多option,请参考官方文档:http://echarts.baidu.com/echarts2/doc/example.html

备注:灵活使用,注意API的调用,echart是一个很好的图表展示工具。

 

转载于:https://www.cnblogs.com/rongyux/p/5535090.html

你可能感兴趣的文章
面试/编程
查看>>
linux每日命令(16):head命令
查看>>
公司内部分享【富有成效的每日站会】总结
查看>>
打造一个上传图片到图床利器的插件(Mac版 开源)
查看>>
iOS横竖屏
查看>>
thinkphp判断更新是否成功
查看>>
Do While ... Loop 与 Do Until ... Loop 的区别
查看>>
【Linux】查询某个字符串出现次数
查看>>
高效使用jquery之一:请使用'On'函数
查看>>
冲刺第一周第三天
查看>>
ERP环境检测工具设计与实现 Environment Detection
查看>>
不要在构造中做太多事情,不然有时候会出现有意思的代码~
查看>>
IIS 发布网站遇到的问题
查看>>
NuGet学习笔记(2)——使用图形化界面打包自己的类库
查看>>
xcode中没有autoSizing的设置
查看>>
字符编码
查看>>
企业应用:应用层查询接口设计
查看>>
浅谈Excel开发:十 Excel 开发中与线程相关的若干问题
查看>>
nfd指令的详细说明
查看>>
安装VisualSvn Server时遇到的问题
查看>>