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

abstract

This commit is contained in:
jiaming 2018-12-24 14:09:47 +08:00
parent c4298008f2
commit 822f1aaa39
2 changed files with 747 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/views/demo/chart/attention.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<border-box-7 class="attention" id="attention">
<div class="title">Attention</div>
<div class="title">Colors</div>
<div class="text-info">
下列组件颜色配置均绑定在节点的colors属性上
</div>
<div class="text-info">
若未绑定将自动使用默认配色
</div>
<div class="text-info">
colors所绑变量应为hex十六进制色的数组,示例如下
</div>
<highlight-code>
&lt;chart :data="data" :colors="color" /&gt;
</highlight-code>
<highlight-code>
// 修改默认配色方案 可直接修改./src/config/color.js
colors: ['#9cf4a7', '#66d7ee', '#eee966', '#a866ee', '#ee8f66', '#ee66aa']
// 数组内颜色将自动循环使用
</highlight-code>
<div class="text-info">
如在特殊颜色配置属性中使用colors关键字,将自动将该属性配置指向colors
</div>
<div class="text-info">
下列组件均不再展示colors属性绑定的变量
</div>
<div class="title">Axis</div>
<div class="text-info">
下列组件中多有使用坐标轴 坐标轴配置如下
</div>
<highlight-code class="center-code">
// 坐标轴分为四部分 x y ax ay
// ax ay 即为x y轴相对的坐标轴
// 如果要使ax ay生效 data中应配置 againstAxis: true
axisData: {
data: [
{ // 该组数据基于 x y 轴
data: [123, 123, 123, '', 123]
},
{ // 改组数据基于 ax
data: [123, 123, 123, '', 123],
againstAxis: true
}
],
x: {
// 必须 x轴展示标签
data: ['label1', 'label2', 'label3', 'label4'],
// 非必须 单位
unit: '单位',
// 非必须 禁止绘制该轴坐标线
noAxisLine: true,
// 非必须 禁止绘制该轴展示标签
noAxisTag: true,
// 非必须 该轴偏移量
offset: 30,
// 非必须 是否绘制网格
grid: true,
// 非必须 设置网格线条为虚线
gridType: 'dashed',
// 非必须 网格虚线dashed
gridLineDash: [2, 2],
// 非必须 网格颜色 多个则循环使用
gridColor: 'colors' | '#123456' | ['#123', '#456']
// 非必须 设置该轴标签before字符
tagBefore: 'before',
// 非必须 设置该轴标签after字符
tagAfter: 'after',
// 非必须 设置x轴 展示标签旋转 仅在x轴有效
rotate: true
},
// y轴 也可设置data 设置data 下列专有配置自动失效
y: {
// 非必须 强制最大值
max: 999,
// 非必须 强制最小值
min: 0,
// 非必须 强制数值展示个数
num: 5,
// 非必须 设置数据精度
fixed: 2
},
// 非必须 水平坐标轴 配置该项 x y数据应对调
// 并非所有图表有效
horizon: true
}
// 具体见示例
</highlight-code>
<div class="title">Label-Line</div>
<div class="text-info">
下列组件中多有使用坐标轴 坐标轴常用配置如下
</div>
<highlight-code class="center-code">
// label-line 即图标底部标签
labelLineData: {
// 必须 标签文字
data: ['标签1', '标签2', ...],
// 非必须 设置标签前置色块颜色 多个则循环使用
color: '#2b7bfb',
// 非必须 设置标签前置色块形状 rectangle 长方形 rect正方形
type: 'rectangle'
}
// 具体见示例
</highlight-code>
<div id="column-chart" />
</border-box-7>
</template>
<script>
export default {
name: 'Attention'
}
</script>
<style lang="less">
#attention {
width: 80%;
margin-left: 20%;
text-align: center;
margin-bottom: 20px;
.highlight-code {
margin: -40px 0px;
}
.center-code {
text-align: left;
padding: 0px 100px;
width: 500px;
margin-left: 50%;
transform: translateX(-50%);
}
}
</style>

598
src/views/demo/chart/columnChartDemo.vue Normal file
View File

@ -0,0 +1,598 @@
<template>
<div>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData1" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
</highlight-code>
<highlight-code>
data: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
// 非必须 强制该组数据填充色 多个颜色 自动渐变
fillColor: ['#247efc', '#ff2fdb']
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
y: {
unit: '辆'
},
labelLine: {
color: '#2b7bfb',
data: ['车流量'],
type: 'rectangle'
}
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData2" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data: {
y: {
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2],
num: 6
},
showColumnBG: true,
columnBGColor: 'rgba(100, 100, 100, 0.3)'
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData3" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: '#247efc'
},
{
data: [
[35, 70, 40],
[74, 180, 45],
[37, 200, 145],
[35, 89, 30],
[65, 100, 48],
[55, 90, 70]
],
fillColor: ['#ff2fdb', '#e3b4a2', '#fafb5d']
}
]
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData4" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data:{
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb']
},
{
data: [130, 313, 392, 180, 400, 188],
fillColor: ['#00BAFF', '#3DE7C9']
}
],
// 非必须 指定圆角柱
roundColumn: true,
// 非必须 指定柱间间隔
spaceBetween: true,
// 非必须 指定局部渐变
localGradient: true
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData5" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb'],
// 非必须 指定左边梯形柱 该属性在单柱数据生效 且不能设置roundColumn
type: 'leftEchelon'
},
{
data: [130, 313, 392, 180, 400, 188],
fillColor: ['#00BAFF', '#3DE7C9'],
// 非必须 指定右边梯形柱
type: 'rightEchelon'
},
// 非必须 显示数值
showValueText: true
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData6" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data: {
data: [
...
{
...
type: 'polyline',
againstAxis: true,
lineColor: '#ff2fdb',
pointColor: '#3de7c9'
}
],
x: {
offset: 40,
rotate: true
},
y: {
tagAfter: 'ml'
},
ay: {
afterTag: '°C'
}
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData7" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb']
},
{
data: [150, 265, 400, 205, 315, 165],
type: 'smoothline',
lineType: 'dashed',
againstAxis: true,
fillColor: ['rgba(48, 222, 210, 0.5)', 'rgba(48, 222, 210, 0)']
}
]
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData8" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data: {
x: {
unit: '辆',
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2]
},
y: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
// 非必须 水平图
horizon: true
}
</highlight-code>
</div>
</border-box-7>
<border-box-7 class="chart-item">
<column-chart :data="columnChartData9" :colors="colors" class="chart" />
<div class="config-info">
<div class="title">Column-Chart</div>
<highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
</highlight-code>
<highlight-code>
// 相同配置不再赘述
data: {
x: {
noAxisLine: true,
noAxisTag: true,
offset: 10
},
y: {
noAxisLine: true,
noAxisTag: true,
offset: 1
},
showValueText: true,
// 非必须 设置数值文字颜色
valueTextColor: '#fff',
// 非必须 设置数值文字相对偏移量
valueTextOffset: [0, 15]
}
</highlight-code>
</div>
</border-box-7>
</div>
</template>
<script>
export default {
name: 'ColumnChartDemo',
data () {
return {
columnChartData1: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb']
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
y: {
unit: '辆'
},
labelLine: {
color: '#2b7bfb',
data: ['车流量'],
type: 'rectangle'
}
},
columnChartData2: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb']
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
y: {
unit: '辆',
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2],
num: 6
},
labelLine: {
color: '#2b7bfb',
data: ['车流量'],
type: 'rectangle'
},
showColumnBG: true,
columnBGColor: 'rgba(100, 100, 100, 0.3)'
},
columnChartData3: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: '#247efc'
},
{
data: [
[35, 70, 40],
[74, 180, 45],
[37, 200, 145],
[35, 89, 30],
[65, 100, 48],
[55, 90, 70]
],
fillColor: ['#ff2fdb', '#e3b4a2', '#fafb5d']
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
y: {
unit: '万元',
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2],
min: 0
},
labelLine: {
color: ['#247efc', '#ff2fdb', '#e3b4a2', '#fafb5d'],
data: ['玩具', '食品', '服装', '电器'],
type: 'rectangle'
},
showColumnBG: true,
columnBGColor: 'rgba(100, 100, 100, 0.3)'
},
columnChartData4: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb']
},
{
data: [130, 313, 392, 180, 400, 188],
fillColor: ['#00BAFF', '#3DE7C9']
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
y: {
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2],
unit: '辆'
},
labelLine: {
color: ['#ff2fdb', '#3DE7C9'],
data: ['同期', '环期'],
type: 'rectangle'
},
roundColumn: true,
spaceBetween: true,
localGradient: true
},
columnChartData5: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb'],
type: 'leftEchelon'
},
{
data: [130, 313, 392, 180, 400, 188],
fillColor: ['#00BAFF', '#3DE7C9'],
type: 'rightEchelon'
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
y: {
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2],
unit: '辆',
num: 7
},
labelLine: {
color: ['#ff2fdb', '#3DE7C9'],
data: ['同期', '环期'],
type: 'rectangle'
},
showValueText: true,
spaceBetween: true
},
columnChartData6: {
data: [
{
data: [175, 125, 90, 130, 45, 65, 65, 47, 50, 52, 45, 37],
fillColor: ['#247efc', '#ff2fdb']
},
{
data: [210, 142, 128, 142, 63, 72, 68, 57, 54, 60, 49, 42],
fillColor: ['#00BAFF', '#3DE7C9']
},
{
data: [23, 18, 16, 14, 10, 8, 6, 6, 6, 6, 6, 5],
type: 'polyline',
againstAxis: true,
lineColor: '#ff2fdb',
pointColor: '#3de7c9'
}
],
x: {
data: [
'一月份', '二月份',
'三月份', '四月份',
'五月份', '六月份',
'七月份', '八月份',
'九月份', '十月份',
'十一月份', '十二月份'
],
offset: 40,
rotate: true
},
y: {
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2],
min: 0,
max: 250,
num: 6,
tagAfter: 'ml'
},
ay: {
min: 0,
max: 25,
num: 6,
tagAfter: '°C'
},
labelLine: {
color: ['#ff2fdb', '#3DE7C9'],
data: ['同期', '环期'],
type: 'rectangle'
},
roundColumn: true,
localGradient: true,
spaceBetween: true
},
columnChartData7: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb']
},
{
data: [150, 265, 400, 205, 315, 165],
type: 'smoothline',
lineType: 'dashed',
againstAxis: true,
fillColor: ['rgba(48, 222, 210, 0.5)', 'rgba(48, 222, 210, 0)']
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
y: {
unit: '辆',
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2],
num: 6
},
labelLine: {
color: '#2b7bfb',
data: ['车流量'],
type: 'rectangle'
},
ay: {
num: 6,
min: 100,
max: 500
}
},
columnChartData8: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb'],
type: 'leftEchelon'
},
{
data: [130, 313, 392, 180, 400, 188],
fillColor: ['#00BAFF', '#3DE7C9'],
type: 'rightEchelon'
}
],
x: {
unit: '辆',
grid: true,
gridLineType: 'dashed',
gridLineDash: [2, 2]
},
y: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
},
labelLine: {
color: '#2b7bfb',
data: ['车流量'],
type: 'rectangle'
},
horizon: true,
showColumnBG: true,
localGradient: true,
spaceBetween: true
},
columnChartData9: {
data: [
{
data: [150, 290, 420, 200, 350, 219],
fillColor: ['#247efc', '#ff2fdb']
}
],
x: {
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
noAxisLine: true,
noAxisTag: true,
offset: 10
},
y: {
noAxisLine: true,
noAxisTag: true,
offset: 1
},
labelLine: {
color: '#2b7bfb',
data: ['车流量'],
type: 'rectangle'
},
showColumnBG: true,
showValueText: true,
valueTextColor: '#fff',
valueTextOffset: [0, 15]
},
colors: ''
}
}
}
</script>
<style lang="less">
</style>