设计网站遇到的问题,梅河口信息网,建立门派,网站发展建设思路目录 #x1f31f;Echarts配置项#x1f31f;Echarts配置项之 title组件#x1f31f;Echarts配置项之 legend组件#x1f31f;Echarts配置项之 tooltip组件#x1f31f;Echarts配置项之 toolbox组件#x1f31f;写在最后 #x1f31f;Echarts配置项
ECharts开源来自百度… 目录 Echarts配置项Echarts配置项之 title组件Echarts配置项之 legend组件Echarts配置项之 tooltip组件Echarts配置项之 toolbox组件写在最后 Echarts配置项
ECharts开源来自百度商业前端数据可视化团队基于html5 Canvas是一个纯Javascript图表库提供直观生动可交互可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验赋予了用户对数据进行挖掘、整合的能力。
想让ECharts展示出我们预期的效果就要在 myChart.setOption()方法中传入一个指定的options配置项其类型为Objectoptions中的配置项非常之多记住所有的并不太现实在这里列一些重要的做介绍
案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleECharts展示/titlescript srcecharts.js/script
/head
bodydiv idchart stylewidth: 800px;height:400px;/div
/body
scriptvar myChart echarts.init(document.getElementById(chart));var options{title:{text:学生成绩饼图,textStyle:{color:red,fontSize:20},link:http://www.echartsjs.com/option.html#title.backgroundColor,subtext:这是期末成绩分布图,left:left,itemGap:5,backgroundColor:blue,borderWidth:5,},legend:{type:scroll,data:[90-100,80-90,70-80,60-70,{name:60分以下,icon:triangle,textStyle:{color:green}}], //ECharts 提供的标记类型包括 circle, rect, roundRect, triangle, diamond, pin, arrow, none 也可以设置通过 image://url 设置为图片其中 URL 为图片的链接orient:horizontal,itemWidth:20,inactiveColor:red,width:200,scrollDataIndex:2,pageButtonPosition:start,animationDurationUpdate:1000,},tooltip:{enterable:true, //鼠标是否可进入提示框浮层中默认为falseconfine:true, //是否将提示框限制在图表内 在用与移动端或者响应式的时候比较有用//position:bottom, //提示框的位置backgroundColor:#ccc, //提示框的背景颜色borderWidth:20, //边框的大小 numberborderColor:red, //边框的颜色extraCssText:color:#000, //写提示框加css样式},toolbox:{feature:{saveAsImage:{ //保存为图片。type:png, //保存图片的格式支持 png 和 jpeg。name:测试, //保存文件的名字默认使用主标题// backgroundColor:auto 保存的图片背景色默认使用 backgroundColor如果backgroundColor不存在的话会取白色。excludeComponents:[toolbox] , //保存为图片时忽略的组件列表默认忽略工具栏。show:true, //是否显示该工具。// icon:image://http://xxx.xxx.xxx/a/b.png, 设置图标iconStyle:{color:red}, //保存为图片 icon 样式设置。 emphasis:{}, //移入设置样式同toolbox的emphasispixelRatio:1, //保存图片的分辨率比例默认跟容器相同大小 number},restore:{ //还原show:true, //是否显示该组件title:这是还原, //名称// icon:, 图标设置iconStyle:{color:blue}, //图标样式emphasis:{iconStyle:{color:red}}, //移入显示样式同上},dataView:{ //数据视图工具可以展现当前图表所用的数据编辑后可以动态更新。show:true, //是否显示该工具 布尔值title:数据视图, //移入显示的名字 stringiconStyle:{color:yellow}, //icon emphasis同上readOnly:false, //是否不可编辑只读。//optionToContent:fun, //自定义函数展示数据//contentToOption:fun, //如果支持数据编辑后的刷新需要自行通过该函数实现组装 option 的逻辑lang:[数据视图的, 关闭了啊, 刷新一哈], //数据视图上有三个话术默认是[数据视图, 关闭, 刷新]。},dataZoom:{ //数据区域缩放。目前只支持直角坐标系的缩放。},magicType:{ //动态类型切换show:true, //是否显示type:[line, bar, stack, tiled], //启用的动态类型title:{line:切换为折线图,bar:切换为柱状图,stack:切换为堆叠,tiled:切换为平铺,},icon:{// line:image://http://xxx.xxx.xxx/a/b.png, 配置各个icon},iconStyle:{color:pink}, //配置icon的样式emphasis:{iconStyle:{}}, //移入样式option:{line:{}}, //配置每一个的样式seriesIndex:{line:[]}, //各个类型对应的系列的列表 },brush:{type:[rect,polygon],icon:{}, //没个按钮的icontitle:{ //标题文本。rect:矩形选择,}}}},series : [{name: 学生成绩区间, //数据项名称type: pie, //饼图radius: 60%, //设置半径 [30%,70%]表示内圆30%外圆70%也就是环图只写一个值就是饼图itemStyle:{}, //图形样式emphasis:{}, //高亮的扇区和标签样式hoverOffset:15, //高亮扇区的偏移距离roseType:false, //是否设置为南丁格尔图labelLine:{show:true, //是否显示引导线length:10, //引导线第一段的长度length2:50, //引导线第二段的长度smooth:0.5, //0-1 平滑程度lineStyle:{ //引导线的样式color:red, //引导线的颜色支持rgba还可以设置渐变和纹理width:2, // number 线宽type:dashed, // 线的类型 solid\dashed\dotted//还支持阴影的设置opacity:0.5, //t透明度。同css的opacity},emphasis:{ //高亮状态下引导线的样式lineStyle:{color:blue} //同上面的lineStyle}, },data:[{value:235,name:90-100,label:{show:true,position:inside,color:#000},//position设置name值得位置默认值为outside通过视觉引导线连到相应的扇区。labelLine:{}, // 同series.lineStyle 单独设置这一项数据的引导线样式emphasis:{lineStyle:{}}, // 同series.emphasis 单独设置这一项数据的高亮引导线样式tooltip:{} //单独设置这一项数据的提示框}, {value:274, name:80-90},{value:310, name:70-80},{value:335, name:60-70},{value:400, name:60分以下,selected:true} //selected设置默认选中],center:[50%, 50%] //圆心的位置可以设置为绝对值和像素两种方式}]}myChart.setOption(options);
/script
/html配置项描述title标题组件包含主标题和副标题。legend图例组件图例组件展现了不同系列的标记(symbol)颜色和名字。可以通过点击图例控制哪些系列不显示。grid直角坐标系内绘图网格可以在网格上绘制折线图柱状图散点图气泡图xAxis直角坐标系 grid 中的 x 轴yAxis直角坐标系 grid 中的 y 轴polar极坐标系可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。radar雷达图坐标系组件只适用于雷达图。tooltip提示框组件。toolbox工具栏。内置有导出图片数据视图动态类型切换数据区域缩放重置五个工具。axisPointer这是坐标轴指示器axisPointer的全局公用设置。brush区域选择组件用户可以选择图中一部分数据从而便于向用户展示被选中数据geo地理坐标系组件用于地图的绘制支持在地理坐标系上绘制散点图线集。timeline提供了在多个 ECharts option 间进行切换、播放等操作的功能。dataset数据集组件用于单独的数据集声明从而数据可以单独管理被多个组件复用并且可以自由指定数据到视觉的映射。series系列列表。每个系列通过 type 决定自己的图表类型color调色盘颜色列表backgroundColor背景色默认无背景。
Echarts配置项之 title组件 title组件包含主标题和副标题。(副标题的相关设置与主标题一样在前面属性名前面加sub) 属性名描述值id默认不指定。指定则可用于在 options 或者 API 中引用组件。(所有的id解释都是相同的)stringshow是否显示标题布尔值默认为truetext主标题文本支持使用 \n 换行字符串link主标题文本超链接。字符串。比如link:http://www.echartsjs.comtarget与a连接的target属性一样设置打开主标题连接的方式。self 当前窗口打开 blank 新窗口打开textStyle设置主标题的文本样式就是字体的颜色、字号、字体、行高、阴影等等一个对象subtext副标题的文本字符串itemGap主标题与副标题之间的间距number类型表示像素默认为10zlevel用于 Canvas 分层不同zlevel值的图形会放置在不同的 Canvas 中Canvas 分层是一种常见的优化手段。number 默认为0z设置标题的层级,z值小的图形会被z值大的图形覆盖。number类型left、right组件离容器左侧/右侧的距离number类型表示像素string可以是50%、left、 center、righttop、bottom组件离容器上侧/下侧的距离。number类型表示像素string可以是50%、top、 middle、bottombackgroundColor标题背景色默认透明支持rgba格式borderWidth标题的边框线宽number 表示像素borderRadius边框的圆角半径number表示统一设置四个角array可以对四个角分别设置borderColor边框的颜色默认#ccc
还可以设置标题阴影的模糊程度、偏移程度、颜色等进行设置
Echarts配置项之 legend组件 legend 图例组件展现了不同系列的标记(symbol)颜色和名字。可以通过点击图例控制哪些系列不显示。 属性名描述值type图例的类型plain普通图例。缺省就是普通图例。scroll可滚动翻页的图例。当图例数量较多时可以使用。id默认不指定。指定则可用于在 option 或者 API 中引用组件。stringshow是否显示图例布尔值默认为truezlevel同title的zlevelnumberz同title的znumber 默认值为2top、left、right、bottom同title组件参看title组件width、height图例组件的宽度、高度string、number默认为auto自适应orient图例列表的布局朝向。horizontal:表示横排默认vertical表示竖排padding图例内边距number和arrayitemGap图例每项之间的间隔。横向布局时为水平间隔纵向布局时为纵向间隔。number默认为10itemWidth、itemHeight图例标记的图形的宽度/高度numberformatter用来格式化图例文本string, FunctionselectedMode控制是否可以通过点击图例改变系列的显示状态string, boolean默认为true可以设成 single 或者 multiple 使用单选或者多选模式。inactiveColor图例关闭时的颜色。值为颜色selected图例选中状态表。值为一个对象{‘a’:true},表示a为选中textStyle图例的公用文本样式。值为一个对象与title组件中的一样tooltip提示框组件值为一个对象详细介绍查看后面的tooltip组件data图例的数据数组数组中内容可以为字符串也可为对象具体查看下面例子backgroundColor图例的背景颜色同title组件的默认透明borderColor、borderWidth、等边框和阴影的设置同title组件中的一样
以下的属性需要在图例组件的type值设为scroll才能生效
属性描述值scrollDataIndex决定当前图例滚动到哪里·number·pageButtonItemGap图例控制块中按钮和页信息之间的间隔。number默认值为5pageButtonGap图例控制块和图例项之间的间隔numberpageButtonPosition图例控制块的位置start控制块在左或上。end按钮快在右或下。默认endpageFormatter图例控制块中页信息的显示格式。function、string默认为 ‘{current}/{total}’其中 {current} 是当前页号从 1 开始计数{total} 是总页数。使用函数须返回这两个值pageIcons图例控制块的图标值为一个对象分别设置横排和竖排的图标pageIconColor翻页按钮的颜色stringpageIconInactiveColor翻页按钮不激活时即翻页到头时的颜色。stringpageIconSize翻页按钮的大小可以是number也可以是array表示 [宽,高]pageTextStyle图例页信息的文字样式一个对象值同textStyleanimation翻页是否使用动画布尔值animationDurationUpdate翻页是的动画时长number 毫秒
Echarts配置项之 tooltip组件 tooltip 提示框组件 提示框组件设置到的地方很多:
可以设置在全局即 tooltip可以设置在坐标系中即 grid.tooltip、polar.tooltip、single.tooltip可以设置在系列中即 series.tooltip可以设置在系列的每个数据项中即 series.data.tooltip
属性描述值show是否显示提示框组件布尔值默认为truetrigger触发类型item数据项图形触发主要在散点图饼图等无类目轴的图表中使用。axis坐标轴触发主要在柱状图折线图等会使用类目轴的图表中使用。none什么都不触发。axisPointer坐标轴指示器配置项。object参看axisPointer组件showContent是否显示提示框浮层布尔值默认显示。alwaysShowContent是否永远显示提示框内容布尔值默认为falsetriggerOn提示框触发的条件stringmousemove鼠标移动时触发。click鼠标点击时触发。mousemove、click(默认)同时鼠标移动和点击时触发。showDelay浮层显示的延迟单位为 msnumber默认没有延迟 不建议设置在 triggerOn 为 mousemove 时有效。hideDelay浮层隐藏的延迟单位为 msnumber 默认100enterable鼠标是否可进入提示框浮层中布尔值 默认为falserenderMode浮层的渲染模式默认以 html 即额外的 DOM 节点展示 tooltip此外还可以设置为 richText 表示以富文本的形式渲染confine是否将 tooltip 框限制在图表的区域内。布尔值默认为falsetransitionDuration提示框浮层的移动动画过渡时间number单位为sposition提示框浮层的位置默认不设置时位置会跟随鼠标的位置。array[20,20]绝对位置 [‘50%’,‘50%’]相对位置只在 trigger 为’item’的时候有效。{‘inside’:鼠标所在图形的内部中心位置‘top’:鼠标所在图形上侧,‘left’、‘right’、‘bottom’}formatter提示框浮层内容格式器支持字符串模板和回调函数两种形式。查看上面legend的formatterbackgroundColor提示框浮层的背景颜色写一个颜色值borderColor提示框浮层的边框颜色。写一个颜色值borderWidth提示框浮层的边框宽numberpadding提示框浮层的内边距numbertextStyle提示框浮层的文本样式object 同title组件的textStyleextraCssText额外附加到浮层的 css 样式string就是写css样式就可以
Echarts配置项之 toolbox组件 toolbox 工具栏。内置有导出图片数据视图动态类型切换数据区域缩放重置五个工具。 属性描述值id指定则可用于在 option 或者 API 中引用组件stringshow是否显示工具栏组件布尔值orient工具栏 icon 的布局朝向。同legend的orientitemSize工具栏 icon 的大小。number默认值为15itemGap工具栏 icon 每项之间的间隔number默认值为10showTitle是否在鼠标 hover 的时候显示每个工具 icon 的标题。布尔值iconStyle公用的 icon 样式设置值为一个对象包含icon的颜色、边框、阴影、透明度等emphasis鼠标 hover 时候的高亮样式。值为一个对象对象中包含一个iconStyle属性也是对象同上面的iconStylezlevel、z同上numberleft、right、top、bottom同上string、numberwidth、height组件容器的宽/高string/numberfeature各工具配置项object 查看开篇的饼图的案例
写在最后
更多前端知识请大家持续关注尽请期待。各位小伙伴让我们 let’s be prepared at all times ✨原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富
