echats问题
2024-10-21 06:09:31
- echats 横轴显示不下datazoom配置,加入滚动条
- 实例博客 https://blog.csdn.net/Zheng_xiao_xin/article/details/80882113
常用属性::
dataZoom: {dataBackground: { //数据阴影的样式。lineStyle: 'red', //阴影的线条样式 对象设置形式 如:lineStyle:{color: 'green',width:20},areaStyle: 'green', //阴影的填充样式},type: 'slider', //slider表示有滑动块的,inside 表示内置的backgroundColor: "none", //组件的背景颜色fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。borderColor: "rgba(167,183,204,0.4)", //边框颜色。realtime: false, //拖动滚动条时是否动态的更新图表数据height: 10, //滚动条高度start: 0, //滚动条开始位置(共100等份)end: 20, //结束位置(共100等份)bottom: '0 %',zoomLock: true, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。moveOnMouseMove: true,textStyle: false //隐藏字体,,也可以设置滚动条两边字体样式}dataZoom=[ //区域缩放
{
id: 'dataZoomX',
show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的,inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。
//'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。
//'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。
//'none': 不过滤数据,只改变数轴范围。
xAxisIndex:, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[,], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[,], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: , //数据窗口范围的起始百分比,表示30%
end: , //数据窗口范围的结束百分比,表示70%
startValue:, //数据窗口范围的起始数值
endValue:, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
throttle:, //设置触发视图刷新的频率。单位为毫秒(ms)。
zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%' },
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止组件的功能。
xAxisIndex:, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[,], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[,], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: , //数据窗口范围的起始百分比,表示30%
end: , //数据窗口范围的结束百分比,表示70%
startValue:, //数据窗口范围的起始数值
endValue:, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
throttle:, //设置触发视图刷新的频率。单位为毫秒(ms)。
zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
}
]; - 横轴字体斜向显示
xAxis: [{
type: 'category',
data: ['Monwwwwwwwwwwwwwww', 'Tue', 'Wedwwwwwwwwwwwwwwwwwwwww', 'Thu', 'Fri', 'Sat', 'Sun', '我', '弄', 'noise', '你', '阿斯达', 'sad', '试试', '', ''],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 1, //0:全部显示,1:间隔为1显示对应类目,2:依次类推,(简单试一下就明白了,这样说是不是有点抽象)
rotate: 30, //倾斜显示,-:顺时针旋转,+或不写:逆时针旋转
},
此回调函数可以将过长的value值,横排显示,,自定义每行显示的字数axisLabel: {interval: 0,formatter: function(value) {var ret = ""; //拼接加\n返回的类目项var maxLength = 2; //每项显示文字个数var valLength = value.length; //X轴类目项的文字个数var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数if (rowN > 1) //如果类目项的文字大于3,{for (var i = 0; i < rowN; i++) {var temp = ""; //每次截取的字符串var start = i * maxLength; //开始截取的位置var end = start + maxLength; //结束截取的位置//这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧temp = value.substring(start, end) + "\n";ret += temp; //凭借最终的字符串}return ret;} else {return value;}}}}],
- Echart 一些参数配置
最新文章
- Firemonkey的旁门左道[六]
- CodeForces - 407A
- LoadingView 自定义加载图片
- OpenJudge计算概论-球弹跳高度的计算
- Java [Leetcode 303]Range Sum Query - Immutable
- LibCurl编程手册以及代码实例
- linux中的fork()函数以及标准I/O缓冲
- jvm学习小结
- java:list排序
- 《Language Implementation Patterns》之 增强解析模式
- 132.leecode-Palindrome Partitioning II
- 学习:ups电池放电时间是怎么计算的?
- HDOJ2017_字符串统计
- Linux基础(一)流程控制
- python 安装opencv 安装pycocotools
- StringUtils方法全集(转)
- JetBrains C++ IDE CLion配置与评测
- ftp文件上传和下载
- jquery屏蔽掉键盘enter提交 onkeydown
- mongodb的docker化安装