百度的Echatrs折线图学习笔记 - JavaScript,CSS,jQuery,HTML5 - web - ITeye论坛
百度的Echatrs折线图学习笔记
锁定老帖子
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
来自: 北京
发表时间：&&
相关知识库：
我在代码见原文链接：
百度ECharts入门
文章的素材有大量注释哦~基本上每一行都注释了配合官方文档看应该是无压力的
1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。
&!DOCTYPE html&
charset="utf-8"
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
id="main"style="height:400px"
2、新建script标签引入模块化单文件echarts.js
&!DOCTYPE html&
charset="utf-8"
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
id="main"style="height:400px"
&!-- ECharts单文件引入 --&
src="/build/dist/echarts.js"
3、新建script标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入
&!DOCTYPE html&
charset="utf-8"
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
id="main"style="height:400px"
&!-- ECharts单文件引入 --&
src="/build/dist/echarts.js"
type="text/javascript"
// 路径配置
require.config({
echarts:'/build/dist'
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的百度的Echatrs折线图学习笔记
百度ECharts入门文章的素材有大量注释哦~基本上每一行都注释了配合官方文档看应该是无压力的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=&/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=&/build/dist/echarts.js&&&/script&& & &script type=&text/javascript&&& && &&&// 路径配置& && &&&require.config({& && && && &paths: {& && && && && & echarts: '/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=&/build/dist/echarts.js&&&/script&& & &script type=&text/javascript&&& && &&&// 路径配置& && &&&require.config({& && && && &paths: {& && && && && & echarts: '/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:&最小值&}& && && && && && && && && && && && && & ]& && && && && && && && && && && && &},& && && && && && && && && && && && &//!-标注
标题有写错哦！echarts
1 总笔记数
682 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的}