some modify
This commit is contained in:
jiaming
parent
f5f50cccd8
commit
a264e2a6e1
BIN
.svn/wc.db
BIN
.svn/wc.db
Binary file not shown.
|
|
@ -8,133 +8,9 @@
|
|||
|
||||
<polyline-chart-demo />
|
||||
|
||||
<!-- <border-box-7 class="chart-item">
|
||||
<point-chart :data="pointChartData1" :colors="colors" class="chart" />
|
||||
<point-chart-demo />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Column-Chart</div>
|
||||
<highlight-code>
|
||||
<point-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7> -->
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<radar-chart :data="radarChartData1" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Radar-Chart</div>
|
||||
<highlight-code>
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [450, 50, 450, 50, 450, 50] // 必须
|
||||
},
|
||||
{
|
||||
data: [50, 450, 50, 450, 50, 450]
|
||||
}, ...
|
||||
],
|
||||
label: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'] // 必须
|
||||
},
|
||||
// 非必须 不配置该项则不绘制底部label
|
||||
labelLine: {
|
||||
data: ['同期', '环期']
|
||||
}
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<radar-chart :data="radarChartData2" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Radar-Chart</div>
|
||||
<highlight-code>
|
||||
<radar-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
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 // 非必须 设置雷达图数据最大值
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<radar-chart :data="radarChartData3" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Radar-Chart</div>
|
||||
<highlight-code>
|
||||
<radar-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
// 相同配置不再赘述
|
||||
data: {
|
||||
ringFillColor: ['rgba(61, 231, 201, 0.1)'],
|
||||
ringFillType: 'mulCover', // 非必须 设置环线填充颜色类型为mulCover
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<radar-chart :data="radarChartData4" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Radar-Chart</div>
|
||||
<highlight-code>
|
||||
<radar-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
// 相同配置不再赘述
|
||||
data: {
|
||||
ringFillColor: ['rgba(61, 231, 201, 0.1)'],
|
||||
ringFillType: 'ring', // 非必须 设置环线填充颜色类型为ring
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
<radar-chart-demo />
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<capsule-chart :data="capsuleChartData" class="chart" />
|
||||
|
|
@ -292,12 +168,18 @@ import columnChartDemo from './chart/columnChartDemo'
|
|||
|
||||
import polylineChartDemo from './chart/polylineChartDemo'
|
||||
|
||||
import pointChartDemo from './chart/pointChartDemo'
|
||||
|
||||
import radarChartDemo from './chart/radarChartDemo'
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
components: {
|
||||
attention,
|
||||
columnChartDemo,
|
||||
polylineChartDemo
|
||||
polylineChartDemo,
|
||||
pointChartDemo,
|
||||
radarChartDemo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -314,153 +196,16 @@ export default {
|
|||
title: 'Polyline-Chart',
|
||||
target: 'polyline-chart'
|
||||
},
|
||||
{
|
||||
title: 'Point-Chart',
|
||||
target: 'point-chart'
|
||||
},
|
||||
{
|
||||
title: 'Radar-Chart',
|
||||
target: 'radar-chart'
|
||||
}
|
||||
],
|
||||
|
||||
pointChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [123, 156, 290, 400, 169, 435]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
[230, 123, 56],
|
||||
[111, 22, 66],
|
||||
[56, 25, 156],
|
||||
[79, 52, 40],
|
||||
[60, 56, 56],
|
||||
[23, 45, 78]
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [15, 20, 27, 35, 27, 17],
|
||||
againstAxis: true
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
},
|
||||
ax: {
|
||||
},
|
||||
ay: {
|
||||
}
|
||||
},
|
||||
|
||||
radarChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [450, 50, 450, 50, 450, 50]
|
||||
},
|
||||
{
|
||||
data: [50, 450, 50, 450, 50, 450]
|
||||
}
|
||||
],
|
||||
label: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
labelLine: {
|
||||
data: ['同期', '环期']
|
||||
}
|
||||
},
|
||||
|
||||
radarChartData2: {
|
||||
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: {
|
||||
data: ['同期', '环期']
|
||||
},
|
||||
rayLineType: 'dashed',
|
||||
rayLineColor: 'colors',
|
||||
ringNum: 5,
|
||||
ringType: 'polyline',
|
||||
ringFillType: '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
|
||||
},
|
||||
|
||||
radarChartData3: {
|
||||
data: [
|
||||
{
|
||||
data: [450, 50, 450, 50, 450, 50]
|
||||
},
|
||||
{
|
||||
data: [50, 450, 50, 450, 50, 450]
|
||||
}
|
||||
],
|
||||
label: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
|
||||
color: 'colors',
|
||||
fontSize: 10
|
||||
},
|
||||
labelLine: {
|
||||
data: ['同期', '环期']
|
||||
},
|
||||
rayLineType: 'dashed',
|
||||
rayLineColor: 'colors',
|
||||
ringNum: 5,
|
||||
ringType: 'polyline',
|
||||
ringFillType: 'mulCover',
|
||||
ringFillColor: ['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
|
||||
},
|
||||
|
||||
radarChartData4: {
|
||||
data: [
|
||||
{
|
||||
data: [450, 50, 450, 50, 450, 50]
|
||||
},
|
||||
{
|
||||
data: [50, 450, 50, 450, 50, 450]
|
||||
}
|
||||
],
|
||||
label: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
|
||||
color: 'colors',
|
||||
fontSize: 10
|
||||
},
|
||||
labelLine: {
|
||||
data: ['同期', '环期']
|
||||
},
|
||||
rayLineType: 'dashed',
|
||||
rayLineColor: 'colors',
|
||||
ringNum: 5,
|
||||
ringType: 'polyline',
|
||||
ringFillType: 'ring',
|
||||
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
|
||||
},
|
||||
|
||||
capsuleChartData: {
|
||||
data: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -77,8 +77,8 @@ x: {
|
|||
tagBefore: 'before',
|
||||
// 非必须 设置该轴标签after字符
|
||||
tagAfter: 'after',
|
||||
// 非必须 设置x轴 展示标签旋转 仅在x轴有效
|
||||
rotate: true
|
||||
// 非必须 设置x轴 展示标签旋转度数 仅在x轴有效
|
||||
rotate: 20
|
||||
},
|
||||
// y轴 也可设置data 设置data 下列专有配置自动失效
|
||||
y: {
|
||||
|
|
|
|||
|
|
@ -46,14 +46,14 @@ data: {
|
|||
<highlight-code>
|
||||
// 相同配置不再赘述
|
||||
data: {
|
||||
y: {
|
||||
y: {
|
||||
grid: true,
|
||||
gridLineType: 'dashed',
|
||||
gridLineDash: [2, 2],
|
||||
num: 6
|
||||
},
|
||||
showColumnBG: true,
|
||||
columnBGColor: 'rgba(100, 100, 100, 0.3)'
|
||||
},
|
||||
showColumnBG: true,
|
||||
columnBGColor: 'rgba(100, 100, 100, 0.3)'
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
|
|
@ -179,7 +179,8 @@ data: {
|
|||
],
|
||||
x: {
|
||||
offset: 40,
|
||||
rotate: true
|
||||
// 旋转角度
|
||||
rotate: 20
|
||||
},
|
||||
y: {
|
||||
tagAfter: 'ml'
|
||||
|
|
@ -206,15 +207,16 @@ data: {
|
|||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [150, 290, 420, 200, 350, 219],
|
||||
fillColor: ['#247efc', '#ff2fdb']
|
||||
data: [330, 290, 330, 400, 330, 290, 330],
|
||||
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)']
|
||||
},
|
||||
{
|
||||
data: [150, 265, 400, 205, 315, 165],
|
||||
data: [260, 265, 280, 450, 280, 265, 260],
|
||||
type: 'smoothline',
|
||||
lineType: 'dashed',
|
||||
againstAxis: true,
|
||||
fillColor: ['rgba(48, 222, 210, 0.5)', 'rgba(48, 222, 210, 0)']
|
||||
lineColor: '#3de7c9',
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -320,7 +322,7 @@ export default {
|
|||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳', '']
|
||||
},
|
||||
y: {
|
||||
unit: '辆',
|
||||
|
|
@ -495,26 +497,29 @@ export default {
|
|||
columnChartData7: {
|
||||
data: [
|
||||
{
|
||||
data: [150, 290, 420, 200, 350, 219],
|
||||
fillColor: ['#247efc', '#ff2fdb']
|
||||
data: [330, 290, 330, 400, 330, 290, 330],
|
||||
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)']
|
||||
},
|
||||
{
|
||||
data: [150, 265, 400, 205, 315, 165],
|
||||
data: [260, 265, 280, 450, 280, 265, 260],
|
||||
type: 'smoothline',
|
||||
lineType: 'dashed',
|
||||
againstAxis: true,
|
||||
fillColor: ['rgba(48, 222, 210, 0.5)', 'rgba(48, 222, 210, 0)']
|
||||
lineColor: '#3de7c9',
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)']
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳', '漯河']
|
||||
},
|
||||
y: {
|
||||
unit: '辆',
|
||||
grid: true,
|
||||
gridLineType: 'dashed',
|
||||
gridLineDash: [2, 2],
|
||||
num: 6
|
||||
num: 6,
|
||||
min: 0,
|
||||
max: 500
|
||||
},
|
||||
labelLine: {
|
||||
color: '#2b7bfb',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div>
|
||||
<border-box-7 class="chart-item">
|
||||
<point-chart :data="pointChartData1" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Point-Chart</div>
|
||||
<highlight-code>
|
||||
<point-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<div id="radar-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PointChartDemo',
|
||||
data () {
|
||||
return {
|
||||
pointChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [123, 156, 290, 400, 169, 435]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
[230, 123, 56],
|
||||
[111, 22, 66],
|
||||
[56, 25, 156],
|
||||
[79, 52, 40],
|
||||
[60, 56, 56],
|
||||
[23, 45, 78]
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [15, 20, 27, 35, 27, 17],
|
||||
againstAxis: true
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
},
|
||||
ax: {
|
||||
},
|
||||
ay: {
|
||||
}
|
||||
},
|
||||
|
||||
colors: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
|
|
@ -112,23 +112,7 @@ data: {
|
|||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<!-- <polyline-chart :data="polylineChartData4" class="chart" /> -->
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: [
|
||||
// 44444444
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
<div id="point-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -149,6 +133,11 @@ export default {
|
|||
},
|
||||
y: {
|
||||
},
|
||||
labelLine: {
|
||||
data: ['车流量'],
|
||||
color: ['#3de7c9'],
|
||||
type: 'rectangle'
|
||||
},
|
||||
showValueText: true,
|
||||
valueTextOffset: [10, -5]
|
||||
},
|
||||
|
|
@ -195,6 +184,11 @@ export default {
|
|||
fixed: 2,
|
||||
num: 10,
|
||||
unit: '%'
|
||||
},
|
||||
labelLine: {
|
||||
data: ['同期', '环期'],
|
||||
color: ['#275afe', '#3de7c9'],
|
||||
type: 'rectangle'
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -212,7 +206,11 @@ export default {
|
|||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
|
||||
labelLine: {
|
||||
data: ['同期', '环期'],
|
||||
color: ['#ff2db8', '#3de7c9'],
|
||||
type: 'rectangle'
|
||||
},
|
||||
color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
|
||||
boundaryGap: true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<div>
|
||||
<border-box-7 class="chart-item">
|
||||
<radar-chart :data="radarChartData1" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Radar-Chart</div>
|
||||
<highlight-code>
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [450, 50, 450, 50, 450, 50] // 必须
|
||||
},
|
||||
{
|
||||
data: [50, 450, 50, 450, 50, 450]
|
||||
}, ...
|
||||
],
|
||||
label: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'] // 必须
|
||||
},
|
||||
// 非必须 不配置该项则不绘制底部label
|
||||
labelLine: {
|
||||
data: ['同期', '环期']
|
||||
}
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<radar-chart :data="radarChartData2" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Radar-Chart</div>
|
||||
<highlight-code>
|
||||
<radar-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
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 // 非必须 设置雷达图数据最大值
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<radar-chart :data="radarChartData3" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Radar-Chart</div>
|
||||
<highlight-code>
|
||||
<radar-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
// 相同配置不再赘述
|
||||
data: {
|
||||
ringFillColor: ['rgba(61, 231, 201, 0.1)'],
|
||||
ringFillType: 'mulCover', // 非必须 设置环线填充颜色类型为mulCover
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<radar-chart :data="radarChartData4" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Radar-Chart</div>
|
||||
<highlight-code>
|
||||
<radar-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
// 相同配置不再赘述
|
||||
data: {
|
||||
ringFillColor: ['rgba(61, 231, 201, 0.1)'],
|
||||
ringFillType: 'ring', // 非必须 设置环线填充颜色类型为ring
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RadarChartDemo',
|
||||
data () {
|
||||
return {
|
||||
radarChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [450, 50, 450, 50, 450, 50]
|
||||
},
|
||||
{
|
||||
data: [50, 450, 50, 450, 50, 450]
|
||||
}
|
||||
],
|
||||
label: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
labelLine: {
|
||||
data: ['同期', '环期']
|
||||
}
|
||||
},
|
||||
|
||||
radarChartData2: {
|
||||
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: {
|
||||
data: ['同期', '环期']
|
||||
},
|
||||
rayLineType: 'dashed',
|
||||
rayLineColor: 'colors',
|
||||
ringNum: 5,
|
||||
ringType: 'polyline',
|
||||
ringFillType: '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
|
||||
},
|
||||
|
||||
radarChartData3: {
|
||||
data: [
|
||||
{
|
||||
data: [450, 50, 450, 50, 450, 50]
|
||||
},
|
||||
{
|
||||
data: [50, 450, 50, 450, 50, 450]
|
||||
}
|
||||
],
|
||||
label: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
|
||||
color: 'colors',
|
||||
fontSize: 10
|
||||
},
|
||||
labelLine: {
|
||||
data: ['同期', '环期']
|
||||
},
|
||||
rayLineType: 'dashed',
|
||||
rayLineColor: 'colors',
|
||||
ringNum: 5,
|
||||
ringType: 'polyline',
|
||||
ringFillType: 'mulCover',
|
||||
ringFillColor: ['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
|
||||
},
|
||||
|
||||
radarChartData4: {
|
||||
data: [
|
||||
{
|
||||
data: [450, 50, 450, 50, 450, 50]
|
||||
},
|
||||
{
|
||||
data: [50, 450, 50, 450, 50, 450]
|
||||
}
|
||||
],
|
||||
label: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
|
||||
color: 'colors',
|
||||
fontSize: 10
|
||||
},
|
||||
labelLine: {
|
||||
data: ['同期', '环期']
|
||||
},
|
||||
rayLineType: 'dashed',
|
||||
rayLineColor: 'colors',
|
||||
ringNum: 5,
|
||||
ringType: 'polyline',
|
||||
ringFillType: 'ring',
|
||||
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
|
||||
},
|
||||
|
||||
colors: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue