ECharts,缩写来自企业图表。ECharts,不仅是国内关注度最高的开源项目,还是中国第一个也是目前唯一一个入选了Github Explorer数据可视化板块的开源项目。
这里咱们结合上篇提到的引导简单栅格框架,来做一个小小的布局。学以致用嘛。从来不喜欢赘述,直接上代码,一切的解释,请看代码注释:
<代码> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery.min.js "祝辞& lt;/script> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/echarts.js "祝辞& lt;/script> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/vintage.js "祝辞& lt;/script> & lt; !——Echarts主题——比; & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/bootstrap.js "祝辞& lt;/script> & lt; !——引导框架——比; & lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.css "/比; & lt; body> & lt; div类="容器"比; & lt; div类="行"比; & lt; div id=皃ie_photo_id”class=癱ol-md-4”祝辞& lt; !——饼图——比; & lt;/div> & lt; div id=發ine_photo_id”class=癱ol-md-4”祝辞& lt; !——折线图——比; & lt;/div> & lt; div id=癰ar_photo_id”class=癱ol-md-4”祝辞& lt; !——柱状图——比; & lt;/div> & lt;/div> & lt;/div> & lt;/body> & lt; script> $(文档)时函数(){/* *饼图*/var myChart=echarts.init (. getelementbyid (“pie_photo_id”),“复古”);/* myChart:为Echart对象 pie_photo_id:显示位置 年份:图表的主题*/选择={//Echarts的参数配置 标题:{//标题 文本:“饼图的标题',//主标题 潜台词:“形容词',//fubiaoti 谢:“中心” }, 提示:{//提示 触发:“项”,//触发提示的类型:数据项图形触发,主要在散点图、饼图等无类目轴的图表中使用。 格式化程序:“{}& lt; br/祝辞{b}: {c} ({d} %)”//提示框浮层内容格式器,支持字符串模板和回调函数两种形式。 }, 传说:{//图例组件。 东方:“垂直”,//图例列表的布局朝向。 左:“左”,//图例组件离容器左侧的距离。 数据:['类1型”、“类型2 ','类型3 ','类型4 ','类型5 ')/* * *图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的名称 *(如果是饼图,也可以是饼图单个数据的名字)。图例组件会自动根据对 *应系列的图形标记(符号)来绘制自己的颜色和标记,特殊字符串” *(空字符串)或者“\ n”(换行字符串)用于图例的换行。 如果数据没有被指定,会自动从当前系列中获取。 多数系列会取自series.name或者系列。编码的seriesName所指定的维度。 如饼图和漏斗图等会取自系列。中数据的名称。 如果要设置单独一项的样式,也可以把该项写成配置项对象。 此时必须使用名字属性对应表示系列的名称。 */}, 系列:[//系列列表。每个系列通过类型决定自己的图表类型 { 名称:“提示信息”, 类型:“派”,/* * *饼图主要用于表现不同类目的数据在总和中的占比。 *每个的弧度表示数据数量的比例。 */半径:“55%”, 中心:“50%”,“60%”, 数据:[ {值:335年,名字:“类型1 '}, {值:310年,名字:“类型2 '}, {值:234年,名字:“类型3 '}, {值:135年,名字:“类”型4}, {值:1548年,名字:“类型5 '} ), itemStyle:{//图形样式。 重点:{//shadowBlur: 10日图形阴影的模糊大小。 shadowOffsetX: 0,//阴影水平方向上的偏移距离。 shadowColor:“rgba (0, 0, 0, 0.5)/* * *颜色可以使用RGB表示,比如“RGB (128、128、128)”, *如果想要加上α通道表示不透明度,可以使用RGBA, *比如“rgba (128、128、128、0.5), *也可以使用十六进制格式,比如# ccc。 *除了纯色之外颜色也支持渐变色和纹理填充 */} } } ] }; myChart.setOption(选项); })/* *折线图*/var lineChart=echarts.init (. getelementbyid (“line_photo_id”),“复古”); 选择={ 标题:{ 文本:“某某消费情况分布的, 潜台词:“副标题” }, 提示:{ 触发:“轴”,//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。 axisPointer:{//坐标轴指示器配置项。 类型:“十字架” } }, 工具箱:{//工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。 显示:真的,//是否显示工具栏 特点:{ saveAsImage:{}//保存为图片 } }, xAxis: {/* *直角坐标系网格中的x轴,一般情况下单个网格组件最多只能放上下两个x轴, *多于两个x轴需要通过配置抵消属性防止同个位置多个x轴的重叠。 */类型:“类别”,//类目轴,适用于离散的类目数据,为该类型时必须通过数据设置类目数据。 boundaryGap:假的,//坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。 数据:[‘0’,‘01:15’,‘02:30’,‘03:45’,‘凌晨’,‘06:15’,‘07:30时’, 时间为,“10”,“15”,“12:30”,“一点”,“维基”,已经售完, “下午”、“18:45’,‘20:00’,‘21:15’,‘22:30’,‘23:45)/* *类目数据,在类目轴(类型:“类别”)中有效。 */}, 桠溪:{/* *直角坐标系网格中的y轴,一般情况下单个网格 *组件最多只能放左右两个y轴,多于两个y轴 *需要通过配置抵消属性防止同个位置多个Y轴的重叠。 */类型:“价值”,//坐标轴类型。数值轴,适用于连续数据。 axisLabel:{//坐标轴刻度标签的相关设置。 格式化程序:“{value} W”//刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 }, axisPointer:{//折叠详情 快速:真//坐标轴指示器是否自动吸附到点上。默认自动判断。 } }, visualMap:{//视觉映射组件,用于进行“视觉编码”,也就是将数据映射到视觉元素(视觉通道)。 显示:假的, 维度:0, 件:[{ lte: 6, 颜色:“绿色” },{ gt: 6, lte: 8 颜色:红色的 },{ gt: 8 lte: 14, 颜色:“绿色” },{ gt: 14, lte: 17, 颜色:红色的 },{ gt: 17, 颜色:“绿色” }) }, 系列:[/* *折线图是用折线将各个数据点标志连接起来的图,表 *用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。 */{ 名称:“消费指数”, 类型:“行”, 平滑:真的,//是否平滑曲线显示。 数据:(300,280,250,260,270,300,550,500,400,390, 380,390,400,500,600,750,800,700,600,400), markArea:{//图表标域,常用于标记图表中某个范围的数据 数据:[[{ 名称:“春季”, xAxis:“07:30时” },{ xAxis:‘10’ }]、[{ 名称:“秋季”, xAxis:“下午” },{ xAxis:“21:15” }]] } } ] }; lineChart.setOption(选项);/* *柱状图*/var柱形图表=echarts.init (. getelementbyid (“bar_photo_id”),“复古”); 选择={ 标题:{ 文本:“主标题”, 潜台词:“副标题” }, 提示:{ 触发:“轴”, axisPointer: { 类型:“影子” } }, 传说:{ 数据:[‘2017年’,‘2018年’) }, 网格:{ 左:“3%”, 右:“4%”, 底:“3%”, containLabel:真 }, xAxis: { 类型:“价值”, boundaryGap (0, 0.01): }, 桠溪:{ 类型:“类别”, 数据:[y轴1,y轴2,y轴3,‘y轴4’,‘y轴5’,‘单位”) }, 系列:[ { 名称:“2017年”, 类型:“酒吧”, 数据:[18203、23489、29034、104970、131744、630230] }, { 名称:“2018年”, 类型:“酒吧”, 数据:[19325、23438、31000、121594、134141、681807] } ] }; barChart.setOption(选项); & lt;/script>使用Echarts几分钟制作出折线图,饼图,柱状图等