在 ECharts 中,平行坐标系(Parallel Coordinates)可以用于可视化多维度的数据,特别是在处理大量数据和多维度数据时非常有用。以下是一些基本的 parallel 平行坐标系的配置选项:
parallel: {
    left: 'center',  // 平行坐标系的位置,可以设置 'left', 'center', 'right'
    top: 'middle',   // 平行坐标系的位置,可以设置 'top', 'middle', 'bottom'
    right: 20,       // 平行坐标系距离容器右侧的距离
    bottom: 20,      // 平行坐标系距离容器底部的距离
    width: '80%',    // 平行坐标系的宽度
    height: '80%',   // 平行坐标系的高度
    layout: 'horizontal',  // 平行坐标系的布局方式,可以设置 'horizontal', 'vertical'
    axisExpandable: true,  // 是否支持坐标轴刷选
    axisExpandCenter: 15,  // 坐标轴刷选的扩展中心位置
    axisExpandCount: 3,    // 坐标轴刷选的初始显示个数
    axisExpandWidth: 50,   // 坐标轴刷选的宽度
    axisExpandTriggerOn: 'click',  // 坐标轴刷选的触发方式,可以设置 'click', 'mousemove'
    smooth: true,           // 是否平滑绘制线条
    parallelAxisDefault: {  // 平行坐标系坐标轴的默认配置
        type: 'value',      // 坐标轴类型,可以设置 'value', 'category', 'time', 'log'
        name: 'Axis Name',  // 坐标轴名称
        nameLocation: 'end', // 坐标轴名称的位置,可以设置 'start', 'middle', 'end'
        nameTextStyle: {     // 坐标轴名称的文字样式
            color: '#333',
            fontSize: 12,
            fontStyle: 'italic',
            fontWeight: 'bold'
        },
        axisLine: {          // 坐标轴轴线的样式
            show: true,
            lineStyle: {
                color: '#aaa',
                width: 1,
                type: 'solid' // 可选值:'solid', 'dashed', 'dotted'
            }
        },
        axisTick: {          // 坐标轴刻度的样式
            show: true,
            alignWithLabel: false,
            interval: 'auto',
            inside: false,
            length: 5,
            lineStyle: {
                color: '#aaa',
                width: 1,
                type: 'solid' // 可选值:'solid', 'dashed', 'dotted'
            }
        },
        axisLabel: {         // 坐标轴刻度标签的样式
            show: true,
            interval: 'auto',
            rotate: 0,
            margin: 8,
            formatter: null,  // 刻度标签的格式化函数
            color: '#333',
            fontSize: 12
        },
        splitLine: {         // 坐标轴在 grid 区域中的分隔线的样式
            show: false,
            lineStyle: {
                color: ['#ccc'],
                width: 1,
                type: 'solid' // 可选值:'solid', 'dashed', 'dotted'
            }
        },
        splitArea: {         // 坐标轴在 grid 区域中的分隔区域的样式
            show: false,
            areaStyle: {
                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
            }
        }
    }
},

上述是一些 parallel 平行坐标系的基本配置选项。你可以根据需要进行调整,以满足你的可视化需求。


转载请注明出处:http://www.zyzy.cn/article/detail/5340/ECharts