百度echarts的使用
2016-02-05 10:45
337 查看
百度echarts的使用
|浏览:11976
|
更新:2014-09-25 13:11
1
2
3
4
5
6
7
分步阅读
一键约师傅
百度师傅高质屏和好师傅,拯救你的碎屏机
百度经验:jingyan.baidu.com我们做网站/应用的时候,很多需要数据统计报表,现在给大家推荐一个百度的报表控件,效果不错,兼容ie8+以上等主流浏览器。
步骤阅读
百度经验:jingyan.baidu.com
工具/原料
echarts开发包百度经验:jingyan.baidu.com
方法/步骤
1我们下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局。2.0以后上的版本,需要把开发包放到body下,否则ie低版本会出现属性未找到的错误,导致图标初始化失败。
步骤阅读
2
第二步,普通初始化图表,通过调用开发包方法,有两种初始化方式,
1.var myChart = echarts.init(document.getElementById("echart"));
2.var myChart=require('echarts').init(document.getElementById("echart"));
一般建议使用第一种方法进行初始化操作。
步骤阅读
步骤阅读
3
第三步,设置option属性,来给图表设置数据,option是数组元素,tooltip:提示框,legend图例,calculable可设置是否拖拽,series设置数据(data类型也为数组类型),我们开始先随机初始化几条模拟数据,
步骤阅读
步骤阅读
4
到这一步,就完成了,图表初始化的步骤,效果如下图所示。然后大家是不是想我们可以改变下图标的样式?答案是可以的,2.0版本为我们留了设置主题的方法,可设置setThem()对图表样式进行修改
步骤阅读
5
我们来看看,主题怎么配置吧,设置色版,设置主题颜色,不一一介绍了,请大家请看下面代码:
步骤阅读
步骤阅读
步骤阅读
步骤阅读
6
通过上面主题的添加我们就完成了对样式的修改,当然最后大家记嘚设置myChart.setTheme(theme);
END
百度经验:jingyan.baidu.com
注意事项
引入源文件要放到body下避免ie8下图例不出来相关文章推荐
- Android Lollipop新特性
- Item 9: 比起typedef更偏爱别名声明(alias declaration)
- Java序列化与反序列化学习(一)
- 第4讲项目2——完成简单计算(2)
- OpenCV1.0编译错误解决办法
- 3款强大的BootStrap的可视化制作工具推荐
- C++11~综述
- Java接口的异常设计
- 挑战NPC
- 窗口样式: 不让窗口可拖动size, 不让窗口最大化
- Lucene的例子(hibernate实现)
- HSSFWorkbook生成Excel文件并导出
- Item 8: 比起0和NULL更偏爱nullptr
- 那些年我们写过的T-SQL(上篇)
- ToStringBuilder学习(三):readResolve()方法与序列化
- swing入门教程(五) swing其他重要概念
- vim使用笔记01——常用模式与操作
- pyqt实现CSDN博客访客数编程自动化增加GUI
- pyqt实现CSDN博客访客数编程自动化增加GUI
- ToStringBuilder学习(二):两种方法用法优缺点及一个问题