echarts图表的内边距_echarts——各个配置项详细说明总结
pie: {
center : ['50%', '50%'], //默认全局居中
radius : [0, '75%'],
clockWise :false, //默认逆时针
startAngle: 90,
minAngle:0, //最小角度改为0
selectedOffset: 10, //选中是扇区偏移量
itemStyle: {
normal: {//color: 各异,
borderColor: '#fff',
borderWidth:1,
label: {
show:true,
position:'outer'
//textStyle: null//默认使用全局文本样式,详见TEXTSTYLE
},
labelLine: {
show:true,
length:20,
lineStyle: {//color: 各异,
width: 1,
type:'solid'}
}
},
emphasis: {//color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth:1,
label: {
show:false
//position: 'outer'//textStyle: null//默认使用全局文本样式,详见TEXTSTYLE
},
labelLine: {
show:false,
length:20,
lineStyle: {//color: 各异,
width: 1,
type:'solid'}
}
}
}
},
map: {
mapType:'china', //各省的mapType暂时都用中文
mapLocation: {
x :'center',
y :'center'
//width//自适应//height//自适应
},
showLegendSymbol :true, //显示图例颜色标识(系列标识的小圆点),存在legend时生效
itemStyle: {
normal: {//color: 各异,
borderColor: '#fff',
borderWidth:1,
areaStyle: {
color:'#ccc'//rgba(135,206,250,0.8)
},
label: {
show:false,
textStyle: {
color:'rgba(139,69,19,1)'}
}
},
emphasis: {//也是选中样式//color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth:1,
areaStyle: {
color:'rgba(255,215,0,0.8)'},
label: {
show:false,
textStyle: {
color:'rgba(139,69,19,1)'}
}
}
}
},
force : {//数据map到圆的半径的最小值和最大值
minRadius : 10,
maxRadius :20,
density :1.0,
attractiveness :1.0,//初始化的随机大小位置
initSize : 300,//向心力因子,越大向心力越大
centripetal : 1,//冷却因子
coolDown : 0.99,//分类里如果有样式会覆盖节点默认样式
itemStyle: {
normal: {//color: 各异,
label: {
show:false
//textStyle: null//默认使用全局文本样式,详见TEXTSTYLE
},
nodeStyle : {
brushType :'both',
color :'#f08c2e',
strokeColor :'#5182ab'},
linkStyle : {
strokeColor :'#5182ab'}
},
emphasis: {//color: 各异,
label: {
show:false
//textStyle: null//默认使用全局文本样式,详见TEXTSTYLE
},
nodeStyle : {},
linkStyle : {}
}
}
},
chord : {
radius : ['65%', '75%'],
center : ['50%', '50%'],
padding :2,
sort :'none', //can be 'none', 'ascending', 'descending'
sortSub : 'none', //can be 'none', 'ascending', 'descending'
startAngle : 90,
clockWise :false,
showScale :false,
showScaleText :false,
itemStyle : {
normal : {
label : {
show :true
//textStyle: null//默认使用全局文本样式,详见TEXTSTYLE
},
lineStyle : {
width :0,
color :'#000'},
chordStyle : {
lineStyle : {
width :1,
color :'#666'}
}
},
emphasis : {
lineStyle : {
width :0,
color :'#000'},
chordStyle : {
lineStyle : {
width :2,
color :'#333'}
}
}
}
},
island: {
r:15,
calculateStep:0.1 //滚轮可计算步长 0.1 = 10%
},
markPoint : {
symbol:'pin', //标注类型
symbolSize: 10, //标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2//symbolRotate : null,//标注旋转控制
itemStyle: {
normal: {//color: 各异,//borderColor: 各异,//标注边线颜色,优先于color
borderWidth: 2, //标注边线线宽,单位px,默认为1
label: {
show:true,
position:'inside' //可选为'left'|'right'|'top'|'bottom'//textStyle: null//默认使用全局文本样式,详见TEXTSTYLE
}
},
emphasis: {//color: 各异
label: {
show:true
//position: 'inside'//'left'|'right'|'top'|'bottom'//textStyle: null//默认使用全局文本样式,详见TEXTSTYLE
}
}
}
},
markLine : {//标线起始和结束的symbol介绍类型,如果都一样,可以直接传string
symbol: ['circle', 'arrow'],//标线起始和结束的symbol大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
symbolSize: [2, 4],//标线起始和结束的symbol旋转控制//symbolRotate : null,
itemStyle: {
normal: {//color: 各异,//标线主色,线色,symbol主色//borderColor: 随color,//标线symbol边框颜色,优先于color
borderWidth: 2, //标线symbol边框线宽,单位px,默认为2
label: {
show:false,//可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
position: 'inside',
textStyle: {//默认使用全局文本样式,详见TEXTSTYLE
color: '#333'}
},
lineStyle: {//color: 随borderColor,//主色,线色,优先级高于borderColor和color//width: 随borderWidth,//优先于borderWidth
type: 'solid',
shadowColor :'rgba(0,0,0,0)', //默认透明
shadowBlur: 5,
shadowOffsetX:3,
shadowOffsetY:3}
},
emphasis: {//color: 各异
label: {
show:false
//position: 'inside'//'left'|'right'|'top'|'bottom'//textStyle: null//默认使用全局文本样式,详见TEXTSTYLE
},
lineStyle : {}
}
}
},
textStyle: {
decoration:'none',
fontFamily:'Arial, Verdana, sans-serif',
fontFamily2:'微软雅黑', //IE8- 字体模糊并且不支持不同字体混排,额外指定一份
fontSize: 12,
fontStyle:'normal',
fontWeight:'normal'},
echarts图表的内边距_echarts——各个配置项详细说明总结相关推荐
- echarts图表的内边距_echarts - 条形图grid设置距离绘图区域的距离
在一些数据量过大的情况下,在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变.这时候设置条形图距离绘图区域上下左右的距离可使用如下方式:表示条形图的柱子距离绘图区左边30%,距离右边40%, ...
- echarts 设置 内边距
echarts设置内边距:
- ECharts 图表插件使用整理(图表配置实现)
ECharts 图表插件使用整理 说明 ECharts 是一个 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器 IE 8 以上,是一个可高度个性化定制的数据可视化图表 ECharts ...
- 【生成PDF】Java如何根据前台Echarts图表生成PDF,并下载
文章目录 前言 一.如何通过java代码生成PDF? 1.依赖 二.如何在PDF中画前台的echarts图? 1.如何拿到前台echarts图的信息? 前台代码: 后台逻辑:生成PDF,并下载 PDF ...
- Echarts 图表在异步加载数据时,增加loading动画,提升用户体验感
文章目录 一.简介 二.增加loading加载动效 2.1 实现原理 2.2 实现步骤 2.3 实现效果图 三.完整源代码及解析 一.简介 Echarts 图表在异步请求数据时,如果加载时间较长,一个 ...
- html前端 echarts图表使用详解
有勇气的牛排 官网 www.920vip.net www920z.net echarts 介绍 官网:https://echarts.apache.org/ 菜鸟教程 使用 CDN https://c ...
- echarts图表第一个案例
1.action中获取到数据 @Overridepublic String execute() throws Exception {List<Student> find = echarts ...
- 在echarts图表外调用echarts的下载功能以及echarts getDataURL图表数据不显示的问题的解决方案...
问题描述: echarts图表的toolbox里面本身有下载的功能,但有的时候,我们需要在echarts图表外添加一个按钮来实现下载,以下是基于vue,echarts版本4的一个解决方案记录: 解决方 ...
- echarts里面的参数解释_Echarts适用小技巧:适用参数详细说明及示例-TS文件
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 前面有文章,讲述了Vue中封装Echarts组件,但都是直接上代码,没有具体对代码进行讲述.今天我们就来看看,如何使Ech ...
最新文章
- 用友伟库“抢劫”金算盘,调研数据究竟谁说了算?
- Oracle 实例崩溃恢复原理剖析 -- 检查点队列的作用与意义
- zookeeper应用之分布式锁
- 【ArcGIS风暴】ArcGIS Editor for OSM中文教程(2):下载及加载OSM数据
- 我学习设计模式的一些所想所得
- Codeforces Round #172 (Div. 2) C. Rectangle Puzzle 数学题几何
- Python-异常处理
- python des加密文件_python DES3 加密解密
- 统计图的连通块的个数的两种方法
- 如何在苹果Mac上保存终端命令?
- javascript 设为首页 | 加入收藏夹 JS代码
- jQuery-点击按钮插入视频
- java fly bird小游戏_实战|JavaScript实现Fly Bird小游戏-【安基网】
- 电力猫服务器的网页,电力猫方案完美解决家庭网络布局
- 基于vue3.0的遮罩
- 篮球记分牌c语言程序和报告,跪求:设计一款篮球记分牌,包括C语言程序和proteus的仿真图,最好附带设计报告.。邮箱liuzhonghuaol@126.com。...
- layui 借助 parseData 回调函数解析table 组件所规定的数据格式
- python文献检索_文献检索与下载
- Blender - 法向 缩放 , Shrink Fatten 应用
- AppUI常规设计颜色使用
热门文章
- c语言编程基础课件,第7章_C语言图形编程基础课件
- html布局overflow,overflow的中文意思
- 搭载鸿蒙os的电脑,全新华为 MatePad Pro 发布在即:搭载鸿蒙系统
- 计算机二级考点的选择题,2016年计算机二级考试试题选择题
- 关于清单,有几点我觉得比较重要。
- 【深度好文】过了30岁,做技术开发、工程师还有前途吗?
- html里下拉标记,HTML: select 标签
- php调用mysql查询结果_php - 在php脚本中处理select查询结果集
- 异常重试_Spring-Retry重试实现原理
- C++Primer第五版学习笔记