ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some modify

This commit is contained in:
jiaming 2018-12-14 19:44:45 +08:00
parent c3e1946792
commit 0981b9e6e8
1 changed files with 251 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

418
src/views/demo/chart.vue
View File

@ -1,90 +1,165 @@
<template> <template>
<div id="chart"> <div id="chart">
<border-box-4 class="chart-item"> <border-box-7 class="chart-item">
<radar-chart :data="radarChartData" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Radar-Chart</div>
<highlight-code>
&lt;radar-chart :data="data" :colors="color" /&gt;
</highlight-code>
<highlight-code>
data: {
// 必填项
data: [
{
// 必填项
data: [180, 250, 300, 500, 600]
// 非必须 可单独配置填充及线条颜色
// color: '#f92655',
// 非必需 可设置线条为虚线
dashed: true
},
{
data: [210, 330, 450, 261, 448]
}, ...
],
label: {
// 必填项 空值自动跳过
data: ['石家庄', '周口', '南阳', '驻马店', '郑州'],
// 非必须 可配置label颜色
// color: '#fff'
},
// 非必须 不配置此项 图例下不会显示label标签
labelLine: ['同期', '环期'],
// 非必须 可配置图例最大半径比例
// radius: 0.8,
// 非必需 可配置雷达环个数
// circleNum: 6
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<capsule-chart :data="capsuleChartData" class="chart" /> <capsule-chart :data="capsuleChartData" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Capsule-Chart</div> <div class="title">Capsule-Chart</div>
<pre> <highlight-code>
&lt;capsule-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
data: { data: {
// 必填项
data: [ data: [
{ {
value: 85, value: 85,
title: '收费系统' title: '收费系统'
},... },...
], ],
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'] // 必填项 依次循环使用
color: ['#00baff', '#3de7c9', ...]
} }
</pre> </highlight-code>
</div> </div>
</border-box-4> </border-box-7>
<border-box-4 class="chart-item" :reverse="true"> <border-box-7 class="chart-item" :reverse="true">
<arc-ring-chart :data="arcRingChartData" class="chart" /> <arc-ring-chart :data="arcRingChartData" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Arc-Ring-Chart</div> <div class="title">Arc-Ring-Chart</div>
<pre>
<highlight-code>
&lt;capsule-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
data: { data: {
// 必填项
data: [ data: [
{ {
value: 38, value: 38,
title: '监控系统' title: '监控系统'
},... },...
], ],
color: ['#00c0ff', '#3de7c9', '#fff'] // 必填项 依次循环使用
color: ['#00c0ff', '#3de7c9', ...]
} }
</pre> </highlight-code>
</div> </div>
</border-box-4> </border-box-7>
<border-box-4 class="chart-item"> <border-box-7 class="chart-item">
<concentric-arc-chart :data="concentricArcChartData" class="chart" /> <concentric-arc-chart :data="concentricArcChartData" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Concentric-Arc-Chart</div> <div class="title">Concentric-Arc-Chart</div>
<pre>
<highlight-code>
&lt;concentric-arc-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
data: { data: {
// 必填项
data: [ data: [
{ {
value: 0.38, value: 0.38,
title: '8小时以内' title: '8小时以内'
},... },...
], ],
color: ['#00c0ff', '#3de7c9'], // 多个颜色 即可产生对应渐变色 // 必填项 多个颜色自动生成渐变色
color: ['#00c0ff', '#3de7c9']
arcArea: [0.3, 0.7], // 非必须 arcArea: [0.3, 0.7], // 非必须
arcGap: 5, // 非必须 arcGap: 5, // 非必须
fontSize: 12 // 非必须 fontSize: 12 // 非必须
} }
</pre> </highlight-code>
</div> </div>
</border-box-4> </border-box-7>
<border-box-4 class="chart-item" :reverse="true"> <border-box-7 class="chart-item" :reverse="true">
<ring-chart :data="ringChart1" class="chart" /> <ring-chart :data="ringChart1" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Ring-Chart</div> <div class="title">Ring-Chart</div>
<pre>
<highlight-code>
&lt;ring-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
data: { data: {
// 必填项
data: [ data: [
{ {
value: 1315, value: 1315,
title: '收费站' title: '收费站'
},... },...
], ],
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'], // 必填项 依次循环使用
active: true // 为false时 无动态效果 color: ['#00baff', '#3de7c9'],
// 为false时 无动态效果
active: true
} }
</pre> </highlight-code>
</div> </div>
</border-box-4> </border-box-7>
<border-box-4 class="chart-item"> <border-box-7 class="chart-item">
<ring-chart :data="ringChart2" class="chart" /> <ring-chart :data="ringChart2" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Ring-chart</div> <div class="title">Ring-chart</div>
<pre>
<highlight-code>
&lt;ring-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
data: { data: {
data: [ data: [
{ {
@ -92,86 +167,98 @@ data: {
title: '收费站' title: '收费站'
},... },...
], ],
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'], // 非必须 依次循环使用
active: false // 为true时 有动态效果 color: ['#00baff', '#3de7c9'],
// 为true时 有动态效果
active: false,
// 非必须 该项可设置百分比精度 active为false时无效
// fixed: 2
} }
</pre> </highlight-code>
</div> </div>
</border-box-4> </border-box-7>
<border-box-4 class="chart-item" :reverse="true"> <border-box-7 class="chart-item" :reverse="true">
<polyline-chart :data="polylineChartData1" class="chart" /> <polyline-chart :data="polylineChartData1" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Polyline-chart</div> <div class="title">Polyline-chart</div>
<pre>
<highlight-code>
&lt;polyline-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
data: { data: {
data: [ data: [
{ {
// 存在空位时 该点忽略 // 必填项 存在空位时 该点忽略
data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56, '', 99.81, 99.56, data: [99.81, '', ..., '', 99.23, 99.62],
99.56, '', '', 99.36, 99.42, '', 99.56, '', '', 99.56, 99.23, 99.62], // 非必须 配置此项 将进行颜色填充
// 配置此项 将进行颜色填充 非必须
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'], fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
// 配置此项可更改数据点颜色 不配置 自动才用全局颜色 非必须 // 非必须 配置此项可更改数据点颜色
pointColor: '#00db95', pointColor: '#00db95',
// 配置此项可更改数据线颜色 不配置 自动采用全局颜色 并进行透明度处理 比数据点颜色略低 非必须 // 非必须 配置此项可更改线条颜色
lineColor: '#ffc53d', lineColor: '#ffc53d',
// 默认为折线 可选项有 polyline 折线 | smoothline 平滑曲线 | column 柱状 非必须 // 非必须 默认为折线
// 可选项有 polyline 折线 | smoothline 平滑曲线 | column 柱状
type: 'polyline' type: 'polyline'
dashed: true // 默认为false 实线 非必须 // 默认为false 实线 非必须
dashed: true
},... },...
], ],
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'], // 非必须 依次循环使用
color: ['#00baff', '#3de7c9', ...],
x: { x: {
// 必填项 不想显示底部刻度 可以全留空位 // 必填项 不想显示底部刻度 可以全留空位
data: [ '10/01', '', '10/03', '', '10/05', '', '10/07', '', '10/09', '', '10/11', '', data: [ '10/01', '', ..., '', '10/23' ],
'10/13', '', '10/15', '', '10/17', '', '10/19', '', '10/21', '', '10/23' ], // unit: '日期' // 非必须 单位展示
unit: '%' // 单位展示 非必须 // fontSize: 20 // 非必须 x轴刻度字体大小
// fontSize: 20 // x轴刻度字体大小 非必须 // offset: 30 // 非必须 x轴向上偏移 此处未配置
// offset: 30 // x轴向上偏移 此处未配置 非必须
}, },
y: { y: {
min: 96, // y轴最小值 未配置则自动根据数据计算 非必须 min: 96, // 非必须 y轴最小值 未配置则自动根据数据计算
max: 100, // y轴最大值 未配置则自动根据数据计算 非必须 max: 100, // 非必须 y轴最大值 未配置则自动根据数据计算
fixed: 2, // y轴刻度 fixed: 2, // 非必须 y轴刻度精度
num: 10, // 刻度个数 默认为10 数据范围不足10则自动缩减 非必须 num: 10, // 非必须刻度个数 默认为10 数据范围不足10则自动缩减
unit: '%' // 单位展示 非必须 unit: '%' // 非必须 单位展示
// fontSize: 20 // x轴刻度字体大小 非必须 // fontSize: 20 // 非必须 x轴刻度字体大小
// offset: 30 // x轴向上偏移 此处未配置 非必须 // offset: 30 // 非必须 x轴向上偏移
}, },
// boundaryGap: false // 配置为true 将不贴合边界进行绘制 非必须 // boundaryGap: false // 非必须 配置为true 将不贴合边界进行绘制
} }
</pre> </highlight-code>
</div> </div>
</border-box-4> </border-box-7>
<border-box-4 class="chart-item"> <border-box-7 class="chart-item">
<polyline-chart :data="polylineChartData2" class="chart" /> <polyline-chart :data="polylineChartData2" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Polyline-chart</div> <div class="title">Polyline-chart</div>
<pre>
<highlight-code>
&lt;polyline-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
data: { data: {
data: [ data: [
{ {
data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56, '', 99.81, 99.56, data: [99.81, ..., 99.81, 99.56],
99.42, 99.56, '', '', 99.36, 99.42, '', 99.56, '', '', 99.56, 99.23, 99.62],
fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'], fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
pointColor: '#00db95', pointColor: '#00db95',
type: 'polyline' type: 'polyline'
}, },
{ {
data: [97.81, 97.42, 97.56, 97.23, 97.62, 97.36, 97.56, '', 97.81, 97.56, data: [97.81, ..., 97.23, 97.62],
97.42, 97.56, '', '', 97.36, 97.42, '', 97.56, '', '', 97.56, 97.23, 97.62],
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'], fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
type: 'smoothline' type: 'smoothline'
} }
], ],
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'], color: ['#00baff', '#3de7c9', ...],
x: { x: {
data: ['10/01', '', '10/03', '', '10/05', '', '10/07', '', '10/09', '', '10/11', '', data: ['10/01', '', ..., '', '10/23']
'10/13', '', '10/15', '', '10/17', '', '10/19', '', '10/21', '', '10/23']
}, },
y: { y: {
fixed: 2, fixed: 2,
@ -179,16 +266,21 @@ data: {
}, },
boundaryGap: true boundaryGap: true
} }
</pre> </highlight-code>
</div> </div>
</border-box-4> </border-box-7>
<border-box-4 class="chart-item" :reverse="true"> <border-box-7 class="chart-item" :reverse="true">
<polyline-chart :data="polylineChartData3" class="chart" /> <polyline-chart :data="polylineChartData3" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Polyline-chart</div> <div class="title">Polyline-chart</div>
<pre>
<highlight-code>
&lt;polyline-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
data: { data: {
data: [ data: [
{ {
@ -212,58 +304,59 @@ data: {
}, },
boundaryGap: true boundaryGap: true
} }
</pre> </highlight-code>
</div> </div>
</border-box-4> </border-box-7>
<border-box-4 class="chart-item"> <border-box-7 class="chart-item">
<polyline-chart :data="polylineChartData4" class="chart" /> <polyline-chart :data="polylineChartData4" class="chart" />
<div class="config-info"> <div class="config-info">
<div class="header">Polyline-chart</div> <div class="title">Polyline-chart</div>
<pre>
data: [
{
data: [5, '', '', '', 2, '', '', '', 4, '', '', '',
2, '', '', '', 3, '', '', '', 2],
dashed: true
},
{
data: ['', 4, '', '', '', 3, '', '', '', 4, '', '',
'', 2, '', '', '', 1, '', '', '', 2 ],
fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
},
{
data: ['', '', 3, '', '', '', 2, '', '', '', 1, '',
'', '', 2, '', '', '', 1, '', '', '', 2],
type: 'smoothline',
fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
},
{
data: ['', '', '', 3, '', '', '', 1, '', '', '', 5,
'', '', '', 2, '', '', '', 4, '', '', '', 2],
type: 'column',
columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
}
],
x: {
data: ['', '', '', '', '', '', '10/07', '', '', '', '', '', '', '10/14',
'', '', '', '', '', '', '10/21', '', '', '']
},
y: {
max: 6,
min: 0,
num: 6,
unit: '单位'
},
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
color: ['#00baff', '#3de7c9', '#ffc53d', '#342432']
}
</pre>
</div>
</border-box-4>
<!-- <border-box-4 class="chart-item" :reverse="true"> <highlight-code>
&lt;polyline-chart :data="data" /&gt;
</highlight-code>
<highlight-code>
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
}
</highlight-code>
</div>
</border-box-7>
<!-- <highlight-code class="chart-item" :reverse="true">
<polyline-chart :data="polylineChartData" class="chart" /> <polyline-chart :data="polylineChartData" class="chart" />
<div class="config-info"> <div class="config-info">
@ -271,7 +364,7 @@ color: ['#00baff', '#3de7c9', '#ffc53d', '#342432']
<pre> <pre>
</pre> </pre>
</div> </div>
</border-box-4> --> </highlight-code> -->
</div> </div>
</template> </template>
@ -530,69 +623,60 @@ export default {
polylineChartData4: { polylineChartData4: {
data: [ data: [
{ {
data: [ data: [3, 4.5, 4, 6, 5, 4, 3],
5, '', '', '',
2, '', '', '',
4, '', '', '',
2, '', '', '',
3, '', '', '',
2
],
dashed: true dashed: true
}, },
{ {
data: [ data: [0.5, 1, 0.8, 3, 2, 1.5, 0.5],
'', 4, '', '',
'', 3, '', '',
'', 4, '', '',
'', 2, '', '',
'', 1, '', '',
'', 2
],
fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)'] fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
}, },
{ {
data: [ data: [1, 3, 2, 4, 3, 2, 1],
'', '', 3, '',
'', '', 2, '',
'', '', 1, '',
'', '', 2, '',
'', '', 1, '',
'', '', 2
],
type: 'smoothline', type: 'smoothline',
fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)'] fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
}, },
{ {
data: [ data: [2, 2.5, 3, 5, 4, 3, 2],
'', '', '', 3,
'', '', '', 1,
'', '', '', 5,
'', '', '', 2,
'', '', '', 4,
'', '', '', 2
],
type: 'column', type: 'column',
columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)'] columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
} }
], ],
x: { x: {
data: [ data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
'', '', '', '', '', '', '10/07',
'', '', '', '', '', '', '10/14',
'', '', '', '', '', '', '10/21',
'', '', ''
]
}, },
y: { y: {
max: 6, max: 6,
min: 0, min: 0,
num: 6,
unit: '单位' unit: '单位'
}, },
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'], labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'] color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
} boundaryGap: true
},
radarChartData: {
data: [
{
data: [180, 250, 300, 500, 600],
dashed: true
},
{
data: [210, 330, 450, 261, 299]
}
],
label: {
data: ['石家庄', '周口', '南阳', '驻马店', '郑州'],
color: '#f92672',
fontSize: 12
},
labelLine: ['同期', '环期'],
circleColor: '#f92672',
rayLineColor: '#f92672',
rayLineOffset: Math.PI * 1,
},
colors: ['#00baff', '#3de7c9']
} }
} }
} }
@ -610,6 +694,7 @@ export default {
flex-direction: row; flex-direction: row;
margin: 20px 0px; margin: 20px 0px;
margin-left: 20%; margin-left: 20%;
align-items: center;
} }
.chart { .chart {
@ -620,12 +705,11 @@ export default {
.config-info { .config-info {
padding: 0px 30px; padding: 0px 30px;
font-size: 15px; display: flex;
flex-direction: column;
.header { .highlight-code {
font-size: 20px; margin: -30px 0px;
font-weight: bold;
margin-bottom: 10px;
} }
} }
} }