省级建设网站,风云榜小说排行榜,公司建网站要多少钱,网站footer内容目录 #x1f31f;Echarts配置项#x1f31f;series#x1f31f;饼图 type:pie#x1f31f;写在最后 #x1f31f;Echarts配置项
ECharts开源来自百度商业前端数据可视化团队#xff0c;基于html5 Canvas#xff0c;是一个纯Javascript图表库#xff0c;提供直观… 目录 Echarts配置项series饼图 type:pie写在最后 Echarts配置项
ECharts开源来自百度商业前端数据可视化团队基于html5 Canvas是一个纯Javascript图表库提供直观生动可交互可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验赋予了用户对数据进行挖掘、整合的能力。
想让ECharts展示出我们预期的效果就要在 myChart.setOption()方法中传入一个指定的options配置项其类型为Objectoptions中的配置项非常之多记住所有的并不太现实在这里列一些重要的做介绍
series
每个系列通过 type 决定自己的图表类型 series是一个数组里面可以写很多的对象每一个对象就是一个图表类型每个对象上的type属性来控制图表的类型他们有很多都一样的样式 属性描述值type设置图表的类型stringid组件 ID。指定则可用于在 option 或者 API 中引用组件 stringname系列名称用于tooltip的显示legend 的图例筛选在 setOption 更新数据和配置项时用于指定对应的系列。stringlegendHoverLink是否启用图例 hover 时的联动高亮。布尔值默认为truecursor鼠标悬浮时在图形元素上时鼠标的样式是什么string 跟css的cursor一样label图形上的一些文本标签可用于说明图形的一些数据信息object主要控制文字颜色、字号、对齐方式、阴影、边框、宽高、描边颜色itemStyle图形样式object主要控制图形颜色、边框、阴影、透明度emphasis高亮的图形样式和标签样式。object里面包换两个对象昂分别是label和itemStyle设置同上tooltip本系列提示框的设置object查看tooltip组件z和zlevel查看title组件的z和zlevelnumbermarkPoint图表标注objecthttp://www.echartsjs.com/option.html#series-scatter.markPointmarkLine图标标线object: http://www.echartsjs.com/option.html#series-scatter.markLinemarkArea图表标域常用于标记图表中某个范围的数据例如标出某段时间投放了广告。object: http://www.echartsjs.com/option.html#series-scatter.markAreasilent图形是否不响应和触发鼠标事件布尔值默认为falsedatasetIndex如果 series.data 没有指定并且 dataset 存在那么就会使用 dataset。datasetIndex 指定本系列使用那个 dataset。number默认为0seriesLayoutBy系列“排布”到 dataset 的行还是列上‘column’默认dataset 的列对应于系列从而 dataset 中每一列是一个维度。‘row’dataset 的行对应于系列从而 dataset 中每一行是一个维度animation是否开启动画布尔值默认为trueanimationThreshold是否开启动画的阈值当单个系列显示的图形数量大于这个阈值时会关闭动画。number 默认值2000animationDuration初始动画的时长number 默认值为1000animationEasing初始动画的缓动效果。string 默认’cubicOut ’animationDelay初始动画的延迟支持函数Function、number 默认为0animationDurationUpdate数据更新动画的时长支持回调函数 function、number 默认值300animationEasingUpdate数据更新动画的缓动效果string 默认值为’cubicOut’animationDelayUpdate数据更新动画的延迟支持回掉函数 function、number 默认值为0data系列中的数据内容数组数组中可以包含很多对象也可以直接写字符串数据
data是这里比较重要的每种图表类型中都有我在这里先总结了他们共有的部分后面每种图表就只介绍他们特殊的部分。
data:[{name:90-100, //数据项名称value: 500, //单个数据项的数值label:{}, //每种图表的解释不同itemStyle:{}, //折线拐点标志的样式,每种图标解释也不同emphasis:{itemStyle:{}}, //高亮样式对于itemStyletooltip:{}, //单个数据提示框的样式},
]饼图 type:‘pie’
属性描述值hoverAnimation是否开启 hover 在扇区上的放大动画效果。布尔值默认为truehoverOffset高亮扇区的偏移距离number 默认为10selectedMode选中模式表示是否支持多个选中默认关闭支持布尔值和字符串字符串取值可选’single’‘multiple’分别表示单选还是多选selectedOffset选中扇区的偏移距离number 默认值为10clockwise饼图的扇区是否是顺时针排布布尔值默认为truestartAngle起始角度number 默认为90支持范围[0, 360]minAngle最小扇区角度用于防止过小影响交互number默认为0支持范围[0, 360]roseType是否展示成南丁格尔图通过半径区分数据大小string‘radius’ 扇区圆心角展现数据的百分比半径展现数据的大小。‘area’ 所有扇区圆心角相同仅通过半径展现数据大小。avoidLabelOverlap是否启用防止标签重叠策略布尔值默认truestillShowZeroSum是否在数据和为0一般情况下所有数据为0 的时候不显示扇区。布尔值默认为truelabelLine标签的视觉引导线样式object 下面例子详细介绍center饼图的中心圆心坐标数组的第一项是横坐标第二项是纵坐标。array [400, 300];[‘50%’, ‘50%’]radius饼图的半径number直接指定外半径值。string:‘20%’表示外半径为可视区尺寸容器高宽中较小一项的 20% 长度。Array:[‘内半径’,‘外半径’]内半径设大显示为圆环图data系列中的数据内容数组。数组项可以为单个数值Object 结合饼图案例
饼图简单案例
!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写在最后
更多前端知识请大家持续关注尽请期待。各位小伙伴让我们 let’s be prepared at all times ✨原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富
