Attention
下列组件颜色配置均绑定在节点的colors属性上
若未绑定将自动使用默认配色
colors所绑变量应为hex十六进制色的数组,示例如下
<chart :data="data" :colors="color" />
// 修改默认配色方案 可直接修改./src/config/color.js
colors: ['#9cf4a7', '#66d7ee', '#eee966', '#a866ee', '#ee8f66', '#ee66aa']
// 数组内颜色将自动循环使用
如在特殊颜色配置属性中使用colors关键字,将自动将该属性配置指向colors
下列组件均不再展示colors属性绑定的变量
Radar-Chart
<radar-chart :data="data" :colors="colors" />
data: {
data: [
{
data: [450, 50, 450, 50, 450, 50] // 必须
},
{
data: [50, 450, 50, 450, 50, 450]
}, ...
],
label: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'] // 必须
},
labelLine: ['同期', '环期'] // 非必须 不配置此项 则不展示底部label
}
Radar-Chart
<radar-chart :data="data" :colors="colors" />
data: {
data: [
{
data: [450, 50, 450, 50, 450, 50],
dashed: true // 非必须 为真时绘制虚线
},
{
data: [50, 450, 50, 450, 50, 450],
lineColor: '#9cf4df', // 非必须 可配置改数据线条颜色
fillColor: 'rgba(238, 233, 108, 0.5)' // 非必须 可配置改数据填充颜色
}
],
label: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
color: 'colors', // 非必须 可配置文字颜色
fontSize: 10 // 非必须 可配置文字大小
},
labelLine: ['同期', '环期'],
rayLineType: 'dashed', // 非必须 设置径向射线为虚线
rayLineColor: 'colors', // 非必须 设置径向射线颜色
ringNum: 5, // 非必填 设置环线个数
ringType: 'polyline', // 非必须 设置环线为折线
ringFillType: 'cover', // 非必须 设置环线填充颜色类型为cover
ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'], // 非必须 设置环线填充色
ringLineType: 'line', // 非必须 设置环线线条为实线
ringLineColor: 'rgba(156, 244, 233, 0.2)', // 非必须 设置环线线条颜色
rayLineOffset: Math.PI * -1.5, // 非必须 设置雷达图旋转偏移
radius: 0.8, // 非必须 设置雷达图最大环线半径
max: 550 // 非必须 设置雷达图数据最大值
}
Radar-Chart
<radar-chart :data="data" :colors="colors" />
data: {
// 相同配置不再赘述
ringFillColor: ['rgba(61, 231, 201, 0.1)'],
ringFillType: 'mulCover', // 非必须 设置环线填充颜色类型为mulCover
}
Radar-Chart
<radar-chart :data="data" :colors="colors" />
data: {
// 相同配置不再赘述
ringFillColor: ['rgba(61, 231, 201, 0.1)'],
ringFillType: 'ring', // 非必须 设置环线填充颜色类型为ring
}
Capsule-Chart
<capsule-chart :data="data" />
data: {
// 必填项
data: [
{
value: 85,
title: '收费系统'
},...
],
// 必填项 依次循环使用
color: ['#00baff', '#3de7c9', ...]
}
Arc-Ring-Chart
<capsule-chart :data="data" />
data: {
// 必填项
data: [
{
value: 38,
title: '监控系统'
},...
],
// 必填项 依次循环使用
color: ['#00c0ff', '#3de7c9', ...]
}
Concentric-Arc-Chart
<concentric-arc-chart :data="data" />
data: {
// 必填项
data: [
{
value: 0.38,
title: '8小时以内'
},...
],
// 必填项 多个颜色自动生成渐变色
color: ['#00c0ff', '#3de7c9']
arcArea: [0.3, 0.7], // 非必须
arcGap: 5, // 非必须
fontSize: 12 // 非必须
}
Ring-Chart
<ring-chart :data="data" />
data: {
// 必填项
data: [
{
value: 1315,
title: '收费站'
},...
],
// 必填项 依次循环使用
color: ['#00baff', '#3de7c9'],
// 为false时 无动态效果
active: true
}
Ring-chart
<ring-chart :data="data" />
data: {
data: [
{
value: 1315,
title: '收费站'
},...
],
// 非必须 依次循环使用
color: ['#00baff', '#3de7c9'],
// 为true时 有动态效果
active: false,
// 非必须 该项可设置百分比精度 active为false时无效
// fixed: 2
}
Polyline-chart
<polyline-chart :data="data" />
data: {
data: [
{
// 必填项 存在空位时 该点忽略
data: [99.81, '', ..., '', 99.23, 99.62],
// 非必须 配置此项 将进行颜色填充
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
// 非必须 配置此项可更改数据点颜色
pointColor: '#00db95',
// 非必须 配置此项可更改线条颜色
lineColor: '#ffc53d',
// 非必须 默认为折线
// 可选项有 polyline 折线 | smoothline 平滑曲线 | column 柱状
type: 'polyline'
// 默认为false 实线 非必须
dashed: true
},...
],
// 非必须 依次循环使用
color: ['#00baff', '#3de7c9', ...],
x: {
// 必填项 不想显示底部刻度 可以全留空位
data: [ '10/01', '', ..., '', '10/23' ],
// unit: '日期' // 非必须 单位展示
// fontSize: 20 // 非必须 x轴刻度字体大小
// offset: 30 // 非必须 x轴向上偏移 此处未配置
},
y: {
min: 96, // 非必须 y轴最小值 未配置则自动根据数据计算
max: 100, // 非必须 y轴最大值 未配置则自动根据数据计算
fixed: 2, // 非必须 y轴刻度精度
num: 10, // 非必须刻度个数 默认为10 数据范围不足10则自动缩减
unit: '%' // 非必须 单位展示
// fontSize: 20 // 非必须 x轴刻度字体大小
// offset: 30 // 非必须 x轴向上偏移
},
// boundaryGap: false // 非必须 配置为true 将不贴合边界进行绘制
}
Polyline-chart
<polyline-chart :data="data" />
data: {
data: [
{
data: [99.81, ..., 99.81, 99.56],
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
pointColor: '#00db95',
type: 'polyline'
},
{
data: [97.81, ..., 97.23, 97.62],
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
type: 'smoothline'
}
],
color: ['#00baff', '#3de7c9', ...],
x: {
data: ['10/01', '', ..., '', '10/23']
},
y: {
fixed: 2,
unit: '%'
},
boundaryGap: true
}
Polyline-chart
<polyline-chart :data="data" />
data: {
data: [
{
data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
type: 'column'
},
{
data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
type: 'smoothline'
}
],
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
x: {
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
},
y: {
fixed: 2,
unit: '%'
},
boundaryGap: true
}
Polyline-chart
<polyline-chart :data="data" />
data: [
data: [
{
data: [3, 4.5, 4, 6, 5, 4, 3],
dashed: true
},
{
data: [0.5, 1, 0.8, 3, 2, 1.5, 0.5],
fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
},
{
data: [1, 3, 2, 4, 3, 2, 1],
type: 'smoothline',
fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
},
{
data: [2, 2.5, 3, 5, 4, 3, 2],
type: 'column',
columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
}
],
x: {
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
},
y: {
max: 6,
min: 0,
unit: '单位'
},
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
boundaryGap: true
}