百度ECharts入门
文章的素材有大量注释哦~基本上每一行都注释了配合官方文档看应该是无压力的
1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。
- <!DOCTYPE html>
- <head>
- <meta charset="utf-8">
- <title>ECharts</title>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
- <div id="main" style="height:400px"></div>
- </body>
2、新建script标签引入模块化单文件echarts.js
- <!DOCTYPE html>
- <head>
- <meta charset="utf-8">
- <title>ECharts</title>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
- <div id="main" style="height:400px"></div>
- <!-- ECharts单文件引入 -->
- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
- </body>
3、新建script标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js),引入图表文件见引入ECharts2
- <!DOCTYPE html>
- <head>
- <meta charset="utf-8">
- <title>ECharts</title>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
- <div id="main" style="height:400px"></div>
- <!-- ECharts单文件引入 -->
- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
- <script type="text/javascript">
- // 路径配置
- require.config({
- paths: {
- echarts: 'http://echarts.baidu.com/build/dist'
- }
- });
- </script>
- </body>
4、script标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成,option见API & Doc
- <!DOCTYPE html>
- <head>
- <meta charset="utf-8">
- <title>ECharts</title>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
- <div id="main" style="height:400px"></div>
- <!-- ECharts单文件引入 -->
- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
- <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>
5、浏览器中打开查看
折线图的学习笔记
一个标准折线图图表有这几大元素
第一:标题
- //标题
- title:{
- //文本
- text:"未来一周气温变化",
- //子标题
- subtext:"纯属虚构"
- },//!-文本
第二:鼠标移入上去的提示框
- //提示框
- tooltip:{
- //坐标轴触发显示
- trigger:"axis"
- },
第三:图例
- //图例 每个图表只能有一个
- legend:{
- data:['最高气温','最低气温']
- },//!-图例
第四:工具箱
- //工具箱 每个图表只能有一个
- toolbox:{
- //是否显示工具箱 图表右上角的一系列开关
- show:true,
- //特效duang
- feature:{
- //辅助线标志
- mark:{show:true},
- //数据视图 可以显示文本数据
- //是否仅读?NO
- dataView:{show:true,readOnly:false},
- //可以切换更多的图形特效吗?
- //YSE! 可以切换line和bar类型
- magicType:{show:true,type:["line",'bar']},
- //卧槽!按错了,可以复原吗?
- //YES!
- restore:{show:"true"},
- //是否可以保存为图片?
- //YES!图片可以嵌入PPT里哦~
- saveAsImage:{show:true}
- },//!-特效
- },//!-工具箱
第五:横坐标
- xAxis:[
- {
- //X轴为类目型
- type:"category",
- //是否两端留白?
- boundaryGap:false,
- //横坐标数据
- //只有类目型的才配拥有data属性!
- data:["周一","周二","周三","周四","周五","周六","周日"]
- }
- ],//!-横坐标
第六:纵坐标
- yAxis:[
- {
- //Y轴类型为数值型
- type:"value",
- //Y轴的文本标签
- //改成 万°C会不会被喷?
- axisLabel:{
- //间隔名称..实际上就是单位
- //{value}传递过来的就是值
- formatter:"{value}°C"
- }
- }
- ],
- //!-纵坐标
第七:图表数据
- series:[
- //数据一
- {
- name:"最高气温",
- //必要的参数
- //不声明为line,电脑妹纸会知道你是个line?
- type:"line",
- //最高气温
- //对应周一-周日
- data:[11,11,15,13,12,13,10],
- //标注 也就是图表上的那个类似于提示气泡的东西
- markPoint:{
- data:[
- //会出现两个提示气泡
- //一周类当中最高气温最大为多少
- {type:"max",name:"最大值"},
- //一周类最高气温最低为多少
- {type:"min",name:"最小值"}
- ]
- },
- //!-标注