Echart的学习之路(二)
2017-11-07 14:30
155 查看
Echart的简单配置之模块化单文件引入(官方推荐)
一、引用Echart.js文件
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
二、添加图表容器
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
</body>
三、模块加载器配置echarts和所需图表的路径
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); </script> </body>
四、图表参数配置和初始化
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body>
五、结果展示
Echart官方的配置详解
相关文章推荐
- HTML5数据可视化学习之路---eChart起步
- 自定义圆形ImageView 实现思路 -- Android 学习之路
- Android开发学习之路--RxAndroid之lambda
- Python学习之路 (三)爬虫(二)
- Mybatis的学习之路(一)
- java虚拟机学习之路-走进java
- Spring 学习之路(十三): Spring 整合web以及struts2
- Java学习之路[2]:JavaFX 前瞻&资料收集__正在更新__
- SpringBoot学习之路:05.Spring Boot集成pagehelper分页插件
- Python 之路 Day5 - 常用模块学习
- 学习python之路---python小算法总结(一)
- java学习之路 之 IO流
- 未来美好憧憬:计算机之路漫漫兮,悠悠载,希望到研究生的时候能够组成一个大家自己的团队,一起学习,开发,研究...
- VC/VC++的学习之路二生成动态库和静态库
- java web 学习之路
- 我的程序员之路(英语的学习)
- iOS学习之路-02-创建页面前的思考
- Linux学习【1】——C++编程的虐心之路
- Java学习之路:不走弯路,就是捷径[生活也是如此啊]
- (他山之石)MFC学习之路(一)VC MFC程序,在About对话框中获取并显示程序的版本号