java网站开发文档自媒体发布平台有哪些
parallel：
可视化高维数据的图表，特点在于可同时展示多个变量之间的关系，并且可以通过调整轴的顺序和缩放来探索不同的数据视角。帮助探索数据之间的关系和趋势
parallelAxis：
平行坐标系中的坐标轴。
parallel 和 parallelAxis 和直角坐标系和直角坐标X、Y轴关系一致，一样的使用。
文章最后提供完整实例代码，标注注释
注意事项：
axisLabel， 坐标轴刻度标签样式配置 show:false，隐藏的时候，只隐藏没有和下一个轴连接线的数据标签。
inside 坐标轴标签朝向配置视乎无效
线条样式： 如果你想控制各轴之间的连接线条的样式，请在 series 中的 lineStyle 属性中配置
一、配置代码
平行坐标系的配置 parallel
// 平行坐标系的配置
option={parallel:{id:'2', // 组件IDz:'2', // 图层优先级zlevel:'1', // 图形绘制优先级left:'20%', // 距离容器左侧偏移right:'10%', // 距离容器右侧偏移top:'10%', // 距离容器顶部偏移bottom:'10%', // 距离容器底部的偏移width:'100%', // 组件的宽度height:'100%', // 组件的高度layout:'horizontal', // 坐标轴布局方式axisExpandable:true, // 是否允许点击折叠axisExpandCenter:50, // 以哪个轴为中心展开axisExpandCount:5, // 初始化哪些轴处于展开状态axisExpandWidth:50, // 展开状态轴间距axisExpandTriggerOn:'click', // 如何出发展开状态，是点击还是悬浮的时候//坐标轴样式配置parallelAxisDefault:{type:'value', // 轴类型name:'name', // 坐标轴名称nameLocation:'end', // 坐标轴名称显示位置nameGap:20, // 坐标轴名称和轴线之间距离nameRotate:90, // 坐标轴名称旋转角度inverse:true, // 是否反向坐标轴boundaryGap:['20%','20%'], // 坐标轴两边留白min:0, // 坐标轴刻度最小值max:100, // 坐标轴刻度最大值scale:true, // 坐标轴是否脱离0刻度splitNumber:5, // 坐标轴分割段数minInterval:5, // 自动计算坐标轴最小间隔大小maxInterval:5, // 自动计算坐标轴最大间隔大小interval:5, // 强制设置坐标轴分割间隔logBase:10, // 对数轴的底数silent:true, // 坐标轴是否静态无法交互triggerEvent:true, // 坐标轴标签是否响应和触发鼠标事件animation:true, // 是否开启动画animationThreshold:200, // 开启动画阈值animationDuration:100, // 初始动画的时长animationEasing:'cubicOut', // 初始动画的缓动效果animationDelay:100, // 初始动画延迟animationDurationUpdate:100, // 数据更新动画时长animationEasingUpdate:100, // 数据更新动画缓动效果animationDelayUpdata:100, // 数据更新动画的延迟// 坐标轴名称样式nameTextStyle:{ color:'red', // 字体颜色fontStyle:'normal', // 文字字体风格fontWeight:'bold', // 文字字体粗细fontFamily:'serif', // 字体系列fontSize:12, // 字体大小align:'left', // 字体水平对齐方式verticalAlign:'top', // 文字垂直对齐方式lineHeight:56, // 行高backgroundColor:'red', // 文字块背景颜色borderColor:'red', // 文字块边框颜色borderWidth:20, // 文字边框宽度borderType:'solid', // 文字块边框描边类型borderDashOffset:10, // 虚线的偏移量borderRadius:40, // 文字块的圆角padding:[2,2,2,2], // 文字块内边距shadowColor:'red', // 文字块的背景阴影颜色shadowBlur:10, // 文字块的背景阴影长度shadowOffsetX:10, // 阴影水平偏移量shadowOffsetY:10, // 阴影垂直偏移量width:120, // 文本显示宽度height:120, // 文本显示高度textBorderColor:'red', // 文字本身的描边颜色textBorderWidth:20, // 文字本身的描边宽度textBorderType:'solid', // 文字的描边类型textBorderDashOffset:20, // 虚线的偏移量textShadowColor:'red', // 文字阴影颜色textShadowBlur:10, // 文字阴影长度textShadowOffsetX:10, // 文字阴影水平偏移量textShadowOffsetY:10, // 文字阴影垂直偏移量overflow:'none', // 文字超出宽度时，是截断还是换行ellipsis:'···', // 文字截断时，末尾显示内容 // 富文本rich:{a:{color:'red',lineHeight:10, } } },// 坐标轴线的样式axisLine:{show:true, // 是否显示坐标轴轴线symbol:'none', // 轴线两边箭头symbolSize:[10,15], // 轴线两边箭头大小symbolOffset:[0,0], // 轴线两边的箭头偏移// 轴线样式lineStyle:{color:'red', // 轴线颜色width:5, // 轴线宽度 type:'solid', // 轴线类型dashOffset:10, // 轴线为虚线时的偏移量cap:'butt', // 轴线末端形状join:'bevel', // 线段相连部分的图形miterLimit:10, // join 为 miter 时,斜截面比例shadowBlur:10, // 轴线阴影模糊大小shadowColor:'red', // 轴线阴影颜色shadowOffsetX:10, // 轴线阴影水平偏移量shadowOffsetY:10, // 轴线阴影垂直偏移量opacity:0.5, // 轴线透明度 } },// 坐标轴刻度的样式axisTick:{show:true, // 是否显示坐标轴刻度alignWithLabel:true, // boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐 interval:1, // 坐标轴刻度显示间隔inside:true, // 坐标轴刻度是否朝内length:10, // 坐标轴刻度的长度// 刻度线的样式lineStyle:{// ··· 与上方的 axisLine 中 lineStyle 内容一张 }},// 坐标轴次刻度线的样式minorTick:{show:false, // 是否显示次刻度线splitNumber:5, // 次刻度分割数，默认为 5段length:3, // 次刻度的长度// 次刻度线的样式lineStyle:{// ··· 与上方的 axisLine 中 lineStyle 内容一张 }, },// 坐标轴刻度标签样式axisLabel:{show:true, // 是否显示刻度标签interval:'auto', // 坐标轴刻度标签显示间隔inside:true, // 刻度标签是否朝内rotate:-90, // 刻度标签旋转角度margin:10, // 刻度标签与轴线之间的距离formatter:'{value}', // 刻度标签内容格式器showMinLabel:true, // 是否显示最小的 labelshowMaxLabel:true, // 是否显示最大的 labelhideOverlap:true, // 是否隐藏重叠的标签color:'red', // 字体颜色fontStyle:'normal', // 文字字体风格fontWeight:'bold', // 文字字体粗细fontFamily:'serif', // 字体系列fontSize:12, // 字体大小align:'left', // 字体水平对齐方式verticalAlign:'top', // 文字垂直对齐方式lineHeight:56, // 行高backgroundColor:'red', // 文字块背景颜色borderColor:'red', // 文字块边框颜色borderWidth:20, // 文字边框宽度borderType:'solid', // 文字块边框描边类型borderDashOffset:10, // 虚线的偏移量borderRadius:40, // 文字块的圆角padding:[2,2,2,2], // 文字块内边距shadowColor:'red', // 文字块的背景阴影颜色shadowBlur:10, // 文字块的背景阴影长度shadowOffsetX:10, // 阴影水平偏移量shadowOffsetY:10, // 阴影垂直偏移量width:120, // 文本显示宽度height:120, // 文本显示高度textBorderColor:'red', // 文字本身的描边颜色textBorderWidth:20, // 文字本身的描边宽度textBorderType:'solid', // 文字的描边类型textBorderDashOffset:20, // 虚线的偏移量textShadowColor:'red', // 文字阴影颜色textShadowBlur:10, // 文字阴影长度textShadowOffsetX:10, // 文字阴影水平偏移量textShadowOffsetY:10, // 文字阴影垂直偏移量overflow:'none', // 文字超出宽度时，是截断还是换行ellipsis:'···', // 文字截断时，末尾显示内容 // 富文本rich:{a:{color:'red',lineHeight:10, }, }, },// 类目数据data:[{value:'name', // 数据类目名称textStyle:{// ··· 与坐标轴名称样式 nameTextStyle 的内容配置一致} } ] }, }}平行坐标系坐标轴配置 parallelAxis
// parallelAxis 配置
option={parallelAxis:{id:'5', // 组件的IDdim:10, // 坐标轴的维度序号parallelIndex:0, // 坐标轴对应的坐标系realtime:true, // 是否开启坐标轴刷选type:'value', // 轴类型name:'name', // 坐标轴名称nameLocation:'end', // 坐标轴名称显示位置nameGap:20, // 坐标轴名称和轴线之间距离nameRotate:90, // 坐标轴名称旋转角度inverse:true, // 是否反向坐标轴boundaryGap:['20%','20%'], // 坐标轴两边留白min:0, // 坐标轴刻度最小值max:100, // 坐标轴刻度最大值scale:true, // 坐标轴是否脱离0刻度splitNumber:5, // 坐标轴分割段数minInterval:5, // 自动计算坐标轴最小间隔大小maxInterval:5, // 自动计算坐标轴最大间隔大小interval:5, // 强制设置坐标轴分割间隔logBase:10, // 对数轴的底数silent:true, // 坐标轴是否静态无法交互triggerEvent:true, // 坐标轴标签是否响应和触发鼠标事件animation:true, // 是否开启动画animationThreshold:200, // 开启动画阈值animationDuration:100, // 初始动画的时长animationEasing:'cubicOut', // 初始动画的缓动效果animationDelay:100, // 初始动画延迟animationDurationUpdate:100, // 数据更新动画时长animationEasingUpdate:100, // 数据更新动画缓动效果animationDelayUpdata:100, // 数据更新动画的延迟// 坐标轴上的刷选样式areaSelectStyle:{width:20, // 选框宽度borderColor:'red', // 选框的边框颜色borderWidth:10, // 选框的边框宽度color:'red', // 选框的填充颜色opacity:0.8, // 选框的透明度 }// 坐标轴名称样式nameTextStyle:{ color:'red', // 字体颜色fontStyle:'normal', // 文字字体风格fontWeight:'bold', // 文字字体粗细fontFamily:'serif', // 字体系列fontSize:12, // 字体大小align:'left', // 字体水平对齐方式verticalAlign:'top', // 文字垂直对齐方式lineHeight:56, // 行高backgroundColor:'red', // 文字块背景颜色borderColor:'red', // 文字块边框颜色borderWidth:20, // 文字边框宽度borderType:'solid', // 文字块边框描边类型borderDashOffset:10, // 虚线的偏移量borderRadius:40, // 文字块的圆角padding:[2,2,2,2], // 文字块内边距shadowColor:'red', // 文字块的背景阴影颜色shadowBlur:10, // 文字块的背景阴影长度shadowOffsetX:10, // 阴影水平偏移量shadowOffsetY:10, // 阴影垂直偏移量width:120, // 文本显示宽度height:120, // 文本显示高度textBorderColor:'red', // 文字本身的描边颜色textBorderWidth:20, // 文字本身的描边宽度textBorderType:'solid', // 文字的描边类型textBorderDashOffset:20, // 虚线的偏移量textShadowColor:'red', // 文字阴影颜色textShadowBlur:10, // 文字阴影长度textShadowOffsetX:10, // 文字阴影水平偏移量textShadowOffsetY:10, // 文字阴影垂直偏移量overflow:'none', // 文字超出宽度时，是截断还是换行ellipsis:'···', // 文字截断时，末尾显示内容 // 富文本rich:{a:{color:'red',lineHeight:10, } } },// 坐标轴线的样式axisLine:{show:true, // 是否显示坐标轴轴线symbol:'none', // 轴线两边箭头symbolSize:[10,15], // 轴线两边箭头大小symbolOffset:[0,0], // 轴线两边的箭头偏移// 轴线样式lineStyle:{color:'red', // 轴线颜色width:5, // 轴线宽度 type:'solid', // 轴线类型dashOffset:10, // 轴线为虚线时的偏移量cap:'butt', // 轴线末端形状join:'bevel', // 线段相连部分的图形miterLimit:10, // join 为 miter 时,斜截面比例shadowBlur:10, // 轴线阴影模糊大小shadowColor:'red', // 轴线阴影颜色shadowOffsetX:10, // 轴线阴影水平偏移量shadowOffsetY:10, // 轴线阴影垂直偏移量opacity:0.5, // 轴线透明度 } },// 坐标轴刻度的样式axisTick:{show:true, // 是否显示坐标轴刻度alignWithLabel:true, // boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐 interval:1, // 坐标轴刻度显示间隔inside:true, // 坐标轴刻度是否朝内length:10, // 坐标轴刻度的长度// 刻度线的样式lineStyle:{// ··· 与上方的 axisLine 中 lineStyle 内容一张 }},// 坐标轴次刻度线的样式minorTick:{show:false, // 是否显示次刻度线splitNumber:5, // 次刻度分割数，默认为 5段length:3, // 次刻度的长度// 次刻度线的样式lineStyle:{// ··· 与上方的 axisLine 中 lineStyle 内容一张 }, },// 坐标轴刻度标签样式axisLabel:{show:true, // 是否显示刻度标签interval:'auto', // 坐标轴刻度标签显示间隔inside:true, // 刻度标签是否朝内rotate:-90, // 刻度标签旋转角度margin:10, // 刻度标签与轴线之间的距离formatter:'{value}', // 刻度标签内容格式器showMinLabel:true, // 是否显示最小的 labelshowMaxLabel:true, // 是否显示最大的 labelhideOverlap:true, // 是否隐藏重叠的标签color:'red', // 字体颜色fontStyle:'normal', // 文字字体风格fontWeight:'bold', // 文字字体粗细fontFamily:'serif', // 字体系列fontSize:12, // 字体大小align:'left', // 字体水平对齐方式verticalAlign:'top', // 文字垂直对齐方式lineHeight:56, // 行高backgroundColor:'red', // 文字块背景颜色borderColor:'red', // 文字块边框颜色borderWidth:20, // 文字边框宽度borderType:'solid', // 文字块边框描边类型borderDashOffset:10, // 虚线的偏移量borderRadius:40, // 文字块的圆角padding:[2,2,2,2], // 文字块内边距shadowColor:'red', // 文字块的背景阴影颜色shadowBlur:10, // 文字块的背景阴影长度shadowOffsetX:10, // 阴影水平偏移量shadowOffsetY:10, // 阴影垂直偏移量width:120, // 文本显示宽度height:120, // 文本显示高度textBorderColor:'red', // 文字本身的描边颜色textBorderWidth:20, // 文字本身的描边宽度textBorderType:'solid', // 文字的描边类型textBorderDashOffset:20, // 虚线的偏移量textShadowColor:'red', // 文字阴影颜色textShadowBlur:10, // 文字阴影长度textShadowOffsetX:10, // 文字阴影水平偏移量textShadowOffsetY:10, // 文字阴影垂直偏移量overflow:'none', // 文字超出宽度时，是截断还是换行ellipsis:'···', // 文字截断时，末尾显示内容 // 富文本rich:{a:{color:'red',lineHeight:10, }, }, },// 类目数据data:[{value:'name', // 数据类目名称textStyle:{// ··· 与坐标轴名称样式 nameTextStyle 的内容配置一致} } ] }
}二、解剖图
三、 实例配置代码
使用：
option 配置代码
var dataBJ = [[1, 55, 9, 56, 0.46, 18, 6, '良'],[2, 25, 11, 21, 0.65, 34, 9, '优'],[3, 56, 7, 63, 0.3, 14, 5, '良'],[4, 33, 7, 29, 0.33, 16, 6, '优'],[5, 42, 24, 44, 0.76, 40, 16, '优'],[6, 82, 58, 90, 1.77, 68, 33, '良'],[7, 74, 49, 77, 1.46, 48, 27, '良'],[8, 78, 55, 80, 1.29, 59, 29, '良'],[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],[20, 22, 8, 17, 0.48, 23, 10, '优'],[21, 39, 15, 36, 0.61, 29, 13, '优'],[22, 94, 69, 114, 2.08, 73, 39, '良'],[23, 99, 73, 110, 2.43, 76, 48, '良'],[24, 31, 12, 30, 0.5, 32, 16, '优'],[25, 42, 27, 43, 1, 53, 22, '优'],[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],[30, 52, 24, 60, 1.03, 50, 21, '良'],[31, 46, 5, 49, 0.28, 10, 6, '优']
];
var dataGZ = [[1, 26, 37, 27, 1.163, 27, 13, '优'],[2, 85, 62, 71, 1.195, 60, 8, '良'],[3, 78, 38, 74, 1.363, 37, 7, '良'],[4, 21, 21, 36, 0.634, 40, 9, '优'],[5, 41, 42, 46, 0.915, 81, 13, '优'],[6, 56, 52, 69, 1.067, 92, 16, '良'],[7, 64, 30, 28, 0.924, 51, 2, '良'],[8, 55, 48, 74, 1.236, 75, 26, '良'],[9, 76, 85, 113, 1.237, 114, 27, '良'],[10, 91, 81, 104, 1.041, 56, 40, '良'],[22, 84, 94, 140, 2.238, 68, 18, '良'],[23, 93, 77, 104, 1.165, 53, 7, '良'],[24, 99, 130, 227, 3.97, 55, 15, '良'],[25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],[26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],[27, 81, 48, 62, 1.619, 26, 3, '良'],[28, 56, 48, 68, 1.336, 37, 9, '良'],[29, 82, 92, 174, 3.29, 0, 13, '良'],[30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],[31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
var dataSH = [[1, 91, 45, 125, 0.82, 34, 23, '良'],[2, 65, 27, 78, 0.86, 45, 29, '良'],[3, 83, 60, 84, 1.09, 73, 27, '良'],[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],[6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],[7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],[8, 89, 65, 78, 0.86, 51, 26, '良'],[9, 53, 33, 47, 0.64, 50, 17, '良'],[10, 80, 55, 80, 1.01, 75, 24, '良'],[11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],[12, 99, 71, 142, 1.1, 62, 42, '良'],[13, 95, 69, 130, 1.28, 74, 50, '良'],[14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],[15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],[16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],[17, 79, 43, 107, 1.05, 59, 37, '良'],[18, 71, 46, 89, 0.86, 64, 25, '良'],[26, 39, 24, 38, 0.61, 47, 17, '优'],[27, 39, 24, 39, 0.59, 50, 19, '优'],[28, 93, 68, 96, 1.05, 79, 29, '良'],[29, 188, 143, 197, 1.66, 99, 51, '中度污染'],[30, 174, 131, 174, 1.55, 108, 50, '中度污染'],[31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];var schema = [{ name: 'date', index: 0, text: '日期' },{ name: 'AQIindex', index: 1, text: 'AQI' },{ name: 'PM25', index: 2, text: 'PM2.5' },{ name: 'PM10', index: 3, text: 'PM10' },{ name: 'CO', index: 4, text: ' CO' },{ name: 'NO2', index: 5, text: 'NO2' },{ name: 'SO2', index: 6, text: 'SO2' },{ name: '等级', index: 7, text: '等级' }
];
// 线条样式
var lineStyle = {normal: {width: 1.5,opacity: 0.5}
};
option = {// 调色板color: ['#c23531', '#91c7ae', '#dd8668'],legend: {data: ['北京', '上海', '广州'],itemGap: 20},// 平行坐标系配置parallel: [{left: '2%',right: '13%',width:'40%',height:'40%',top: '12%',// 该坐标系中坐标轴的样式parallelAxisDefault: {type: 'value',name: 'AQI指数',nameLocation: 'end',nameGap: 20,nameTextStyle: {fontSize: 12},// 坐标轴的标签配置axisLabel:{show:true,color:'red',fontSize:14},}},{left: '52%',width:'40%',height:'40%',top: '12%',parallelAxisDefault: {type: 'value',name: 'AQI指数',nameLocation: 'end',nameGap: 20,axisLabel:{show:true,fontSize:12,color:'green',},nameTextStyle: {fontSize: 12}}},{left: 'center',width:'60%',height:'35%',bottom: '2%',parallelAxisDefault: {type: 'value',name: 'AQI指数',nameLocation: 'end',nameGap: 20,nameTextStyle: {fontSize: 12},// 显示次刻度线minorTick:{show:true,},axisLabel:{show:true,fontSize:14},}},],// 平行坐标系 坐标轴配置parallelAxis: [// 第一个平行坐标系的轴配置，北京{dim: 0,name: schema[0].text,inverse: true,max: 31,nameLocation: 'start'},{ dim: 1, name: schema[1].text },{ dim: 2, name: schema[2].text },{ dim: 3, name: schema[3].text },{ dim: 4, name: schema[4].text },{ dim: 5, name: schema[5].text },{ dim: 6, name: schema[6].text },{dim: 7,name: schema[7].text,type: 'category',data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']},// 第二个平行坐标系的轴配置，上海{dim: 0,name: schema[0].text,parallelIndex:1,inverse: true,max: 31,nameLocation: 'start'},{ dim: 1, parallelIndex:1, name: schema[1].text },{ dim: 2, parallelIndex:1, name: schema[2].text },{ dim: 3, parallelIndex:1, name: schema[3].text },{ dim: 4, parallelIndex:1, name: schema[4].text },{ dim: 5, parallelIndex:1, name: schema[5].text },{ dim: 6, parallelIndex:1, name: schema[6].text },{dim: 7,name: schema[7].text,parallelIndex:1,type: 'category',data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']},// 第三个平行坐标系的轴配置，广州{dim: 0,name: schema[0].text,parallelIndex:2,inverse: true,max: 31,nameLocation: 'start'},{ dim: 1, parallelIndex:2, name: schema[1].text },{ dim: 2, parallelIndex:2, name: schema[2].text },{ dim: 3, parallelIndex:2, name: schema[3].text },{ dim: 4, parallelIndex:2, name: schema[4].text },{ dim: 5, parallelIndex:2, name: schema[5].text },{ dim: 6, parallelIndex:2, name: schema[6].text },{dim: 7,name: schema[7].text,parallelIndex:2,type: 'category',data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}],series: [{// 默认绑定至第一个平行坐标系中name: '北京',type: 'parallel',lineStyle: lineStyle,data: dataBJ},{name: '上海',type: 'parallel',lineStyle: lineStyle,// 绑定至第二个平行坐标系中parallelIndex:1,data: dataSH},{name: '广州',type: 'parallel',// 绑定至第三个平行坐标系中parallelIndex:2,lineStyle: lineStyle,data: dataGZ}]
};