some modify

This commit is contained in:
jiaming 2018-12-25 10:56:32 +08:00
parent f5f50cccd8
commit a264e2a6e1
7 changed files with 363 additions and 308 deletions

Binary file not shown.

View File

@ -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>
&lt;point-chart :data="data" :colors="colors" /&gt;
</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>
&lt;radar-chart :data="data" :colors="colors" /&gt;
</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>
&lt;radar-chart :data="data" :colors="colors" /&gt;
</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>
&lt;radar-chart :data="data" :colors="colors" /&gt;
</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: [
{

View File

@ -77,8 +77,8 @@ x: {
tagBefore: 'before',
// after
tagAfter: 'after',
// x x
rotate: true
// x x
rotate: 20
},
// y data data
y: {

View File

@ -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',

View File

@ -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>
&lt;point-chart :data="data" :colors="colors" /&gt;
</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>

View File

@ -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>
&lt;polyline-chart :data="data" /&gt;
</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
},

View File

@ -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>
&lt;radar-chart :data="data" :colors="colors" /&gt;
</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>
&lt;radar-chart :data="data" :colors="colors" /&gt;
</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>
&lt;radar-chart :data="data" :colors="colors" /&gt;
</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>