echarts平行坐标系是一种特殊的坐标系,它可以同时显示多个不同类型的数据,并且可以将这些数据进行对比分析。它是一种非常有用的图表,可以帮助我们快速了解多个数据之间的关系。
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%', // 左侧留出5% 空间 right: '13%', // 右侧留出13% 空间 bottom: 100, // 底部留出100px 空间 parallelAxisDefault:{ // 设定每一个平衡坐标轴的默认样式 type:'value', // 数值轴 nameLocation:'end', // 数字位于位于轴中间位置 nameTextStyle:{ // 设定数字文字大小 fontSize:'14' // 文字大小为14px } } }, series:[{ // 第一条数据集合 type:'parallel', // 折现图形式显示数据集合内容 data:[ [12, 12, 12], [24, 24, 24], [36, 36, 36] ] // 数据集合内容 }] }; myChart.setOption(option);
平行坐标轴刻度标签的相关设置。
[ default: true ]
平行坐标轴刻度标签的显示控制,默认为显示状态。
[ default: 'auto' ]
平行坐标轴刻度标签的显示间隔。
注意:只在类目轴中有效。
默认会采用标签不重叠的策略间隔显示平行坐标轴刻度标签。
可以设置成 0 强制显示所有标签。
如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
(index:number, value: string) => boolean
第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false。
[ default: false ]
平行坐标轴刻度标签的朝向设置,默认为朝外。
[ default: 0 ]
平行坐标轴刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。
[ default: 8 ]
平行坐标轴刻度标签与轴线之间的距离。
[ default: null ]
平行坐标轴刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
示例:
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function (value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
[ default: null ]
是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定(即如果标签重叠,不会显示最小 tick 的 label)。
[ default: null ]
是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定(即如果标签重叠,不会显示最大 tick 的 label)。
平行坐标轴刻度标签文字的颜色,默认取 axisLine.lineStyle.color。支持回调函数,格式如下:
(val: string) => Color
参数是标签的文本,返回颜色值,如下示例:
textStyle: {
color: function (value, index) {
return value >= 0 ? 'green' : 'red';
}
}
[ default: 'normal' ]
标签文字字体的风格
可选:
[ default: normal ]
标签文字字体的粗细
可选:
[ default: 'sans-serif' ]
标签文字的字体系列
还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
[ default: 12 ]
标签文字的字体大小
标签文字水平对齐方式,默认自动。
可选:
rich 中如果没有设置 align,则会取父层级的 align。例如:
{
align: right,
rich: {
a: {
// 没有设置 `align`,则 `align` 为 right
}
}
}
标签文字垂直对齐方式,默认自动。
可选:
rich 中如果没有设置 verticalAlign,则会取父层级的 verticalAlign。例如:
{
verticalAlign: bottom,
rich: {
a: {
// 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
}
}
}
标签文字的行高。
rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:
{
lineHeight: 56,
rich: {
a: {
// 没有设置 `lineHeight`,则 `lineHeight` 为 56
}
}
}
[ default: 'transparent' ]
标签文字块背景色。
可以是直接的颜色值,例如:'#123234', 'red', rgba(0,23,11,0.3)'。
可以支持使用图片,例如:
backgroundColor: {
image: 'xxx/xxx.png'
// 这里可以是图片的 URL,
// 或者图片的 dataURI,
// 或者 HTMLImageElement 对象,
// 或者 HTMLCanvasElement 对象。
}
当使用图片的时候,可以使用 width 或 height 指定高宽,也可以不指定自适应。
[ default: 'transparent' ]
标签文字块边框颜色。
[ default: 0 ]
标签文字块边框宽度。
[ default: 0 ]
标签文字块的圆角。
[ default: 0 ]
标签文字块的内边距。例如:
注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。
[ default: 'transparent' ]
标签文字块的背景阴影颜色。
[ default: 0 ]
标签文字块的背景阴影长度。
[ default: 0 ]
标签文字块的背景阴影 X 偏移。
[ default: 0 ]
标签文字块的背景阴影 Y 偏移。
标签文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。
注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。
width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。
注意,如果不定义 rich 属性,则不能指定 width 和 height。
标签文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。
注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding;如果不定义 rich 属性,则不能指定 width 和 height。
[ default: 'transparent' ]
标签文字本身的描边颜色。
[ default: 0 ]
标签文字本身的描边宽度。
[ default: 'transparent' ]
标签文字本身的阴影颜色。
[ default: 0 ]
标签文字本身的阴影长度。
[ default: 0 ]
标签文字本身的阴影 X 偏移。
[ default: 0 ]
标签文字本身的阴影 Y 偏移。
ECharts 中 calendar 表示日历坐标系组件。在 ECharts 中日历图的实现,是通过使用日历坐标系组件来达到日历图效果的,如下方的...
calendar.yearLabel |Object设置 ECharts 日历坐标中年份标签。calendar.yearLabel.show |boolean[ default: true ]是否在普通状...
您可以使用 series[i]-bar 来在 ECharts 中实现柱状(条形)图,ECharts 柱状(条形)图是通过柱形的高度(条形的宽度)来表现数...
Highcharts 异步加载数据曲线图表Highcharts 曲线图以下实例演示了异步加载数据曲线图表。这边我们通过 jQuery.getJSON() 方法从...
Highcharts 显示图例饼图Highcharts 饼图以下实例演示了显示图例饼图。我们在前面的章节已经了解了 Highcharts 基本配置语法。接...
使用表单进行用户输入本指南基于“入门教程”基本Angular应用中的第三步“管理数据”。本节将引导你添加基于表单的结账功能,以...
里程碑4:危机中心本节将向你展示如何在应用中添加子路由并使用相对路由。要为应用当前的危机中心添加更多特性,请执行类似于her...
测试实用工具API本页面描述了一些最有用的Angular测试特性。Angular测试实用工具包括TestBed、ComponentFixture以及一些...
浏览翻译后的范例应用要浏览Angular国际化指南中使用的带法语翻译的范例应用,参见liveexample/下载范例。fr-CA和en-US范例以下...
可复用动画本主题提供了一些关于如何创建可复用动画的例子。前提条件在继续本主题前,你需要熟悉下列知识:Angular动画简介转场...