echarts平行坐标系是一种特殊的坐标系,它可以同时显示多个变量之间的关系。它由多条平行的坐标轴构成,每条轴代表一个变量,因此可以将多个变量的数据进行对比分析。
echarts平行坐标系有很多优势:首先,它能够同时显示多个变量之间的关系;其次,它能够将不同变量之间的相互影响进行对比分析;最后,它能够将不同变量之间的相互影响进行对比分析。
var myChart = echarts.init(document.getElementById('main')); option = { parallelAxis: [{dim: 0, name: 'A'}, {dim: 1, name: 'B'}, {dim: 2, name: 'C'}], // 定义三个平行轴 parallel: { // 平行坐标轴配置项 left: '5%', // 距左侧位置% 百分数单位 默认50% 支持px单位 或者left、right、center 具体看文档说明 right: '13%', // 距右侧位置% 百分数单位 默认50% 支持px单位 或者left、right、center 具体看文档说明 top: 60, // 距上侧位置px 像素单位 默认60 支持px单位 或者top、bottom、center 具体看文档说明 bottom: 60, // 距下侧位置px 像素单位 默认60 支持px单位 或者top、bottom、center 具体看文档说明 parallelAxisDefault:{ // 这是一些默认配置项(如上所有都是默认配置) type : 'value', // 坐标轴的数值形式 value代表数字形式 category代表字符串形式 nameLocation : 'end',// 坐标轴名字的显示方式 start代表在最小端显示 end代表在最大端显示 nameGap : 15, // 坐标轴各个分割间隔大小 axisLine:{ // 这是一些固定配置选项 lineStyle:{ // 这是一些固定配置选项 color:'#555' // 线条颜色 } }, axisTick:{ // 这是一些固定配ECharts平行坐标轴组件如何设置轴线
parallelAxis.axisLine | Object
通过 axisLine 属性对 ECharts 平行坐标轴轴线进行设置。
parallelAxis.axisLine.show | boolean
[ default: true ]
是否显示坐标轴轴线。
parallelAxis.axisLine.lineStyle | Object
平行坐标轴轴线的样式。
parallelAxis.axisLine.lineStyle.color | Color
[ default: '#333' ]
坐标轴线线的颜色。
颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充。// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } // 纹理填充 color: { image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat' }
parallelAxis.axisLine.lineStyle.width | number
[ default: 1 ]
坐标轴线轴线的宽度。
parallelAxis.axisLine.lineStyle.type | string
[ default: 'solid' ]
坐标轴线轴线的类型。
可选:
- 'solid'
- 'dashed'
- 'dotted'
parallelAxis.axisLine.lineStyle.shadowBlur | number
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例:
{ shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 }
parallelAxis.axisLine.lineStyle.shadowColor | Color
阴影颜色。支持的格式同color。
parallelAxis.axisLine.lineStyle.shadowOffsetX | number
[ default: 0 ]
阴影水平方向上的偏移距离。
parallelAxis.axisLine.lineStyle.shadowOffsetY | number
[ default: 0 ]
阴影垂直方向上的偏移距离。
parallelAxis.axisLine.lineStyle.opacity | number
图形透明度。
支持从 0 到 1 的数字,为 0 时不绘制该图形。
graphic.elements[i]-image在 ECharts 中使用 image 图形元素。graphic.elements[i]-image.type |string[ default: image ]EChar...
ECharts 图表使用 pie 来实现饼图,饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。饼图更适合...
series[i]-radar.areaStyle.normal通过 normal 状态设置 ECharts 雷达图区域。series[i]-radar.areaStyle.normal.color雷达图区...
Highcharts 基本曲线图Highcharts 曲线图以下实例是基础曲线图。我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们...
Highcharts 丢失值区域图Highcharts 区域图以下实例演示了丢失值区域图。我们在前面的章节已经了解了 Highcharts 基本配置语法。...