some modify
This commit is contained in:
jiaming
@ -6,6 +6,8 @@
|
||||
|
||||
<column-chart-demo />
|
||||
|
||||
<polyline-chart-demo />
|
||||
|
||||
<!-- <border-box-7 class="chart-item">
|
||||
<point-chart :data="pointChartData1" :colors="colors" class="chart" />
|
||||
|
||||
@ -270,184 +272,6 @@ data: {
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData1" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
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 将不贴合边界进行绘制
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<polyline-chart :data="polylineChartData2" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
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
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData3" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
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
|
||||
}
|
||||
</highlight-code>
|
||||
</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: [
|
||||
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" />
|
||||
|
||||
@ -466,11 +290,14 @@ import attention from './chart/attention.vue'
|
||||
|
||||
import columnChartDemo from './chart/columnChartDemo'
|
||||
|
||||
import polylineChartDemo from './chart/polylineChartDemo'
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
components: {
|
||||
attention,
|
||||
columnChartDemo
|
||||
columnChartDemo,
|
||||
polylineChartDemo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -483,6 +310,10 @@ export default {
|
||||
title: 'Column-Chart',
|
||||
target: 'column-chart'
|
||||
},
|
||||
{
|
||||
title: 'Polyline-Chart',
|
||||
target: 'polyline-chart'
|
||||
},
|
||||
{
|
||||
title: 'Radar-Chart',
|
||||
target: 'radar-chart'
|
||||
@ -520,208 +351,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
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: '',
|
||||
|
||||
radarChartData1: {
|
||||
data: [
|
||||
{
|
||||
@ -977,141 +606,6 @@ export default {
|
||||
active: false
|
||||
},
|
||||
|
||||
polylineChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
99.81, 99.42, 99.56, 99.23, 99.62,
|
||||
99.36, 99.56, '', 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)'],
|
||||
pointColor: '#00db95',
|
||||
lineColor: '#ffc53d',
|
||||
type: 'polyline',
|
||||
dashed: true
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
|
||||
x: {
|
||||
data: [
|
||||
'10/01', '', '10/03', '', '10/05', '',
|
||||
'10/07', '', '10/09', '', '10/11', '',
|
||||
'10/13', '', '10/15', '', '10/17', '',
|
||||
'10/19', '', '10/21', '', '10/23'
|
||||
]
|
||||
},
|
||||
y: {
|
||||
min: 96,
|
||||
max: 100,
|
||||
fixed: 2,
|
||||
num: 10,
|
||||
unit: '%'
|
||||
}
|
||||
},
|
||||
|
||||
polylineChartData2: {
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
99.81, 99.42, 99.56, 99.23, 99.62,
|
||||
99.36, 99.56, '', 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)'],
|
||||
pointColor: '#00db95',
|
||||
type: 'polyline'
|
||||
},
|
||||
{
|
||||
data: [
|
||||
97.81, 97.42, 97.56, 97.23, 97.62,
|
||||
97.36, 97.56, '', 97.81, 97.56,
|
||||
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)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
|
||||
x: {
|
||||
data: [
|
||||
'10/01', '', '10/03', '', '10/05', '',
|
||||
'10/07', '', '10/09', '', '10/11', '',
|
||||
'10/13', '', '10/15', '', '10/17', '',
|
||||
'10/19', '', '10/21', '', '10/23'
|
||||
]
|
||||
},
|
||||
y: {
|
||||
fixed: 2,
|
||||
unit: '%'
|
||||
},
|
||||
boundaryGap: true
|
||||
},
|
||||
|
||||
polylineChartData3: {
|
||||
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
|
||||
},
|
||||
|
||||
polylineChartData4: {
|
||||
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
|
||||
},
|
||||
|
||||
colors: ''
|
||||
}
|
||||
}
|
||||
|
||||
@ -281,6 +281,8 @@ data: {
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<div id="polyline-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -306,7 +308,8 @@ export default {
|
||||
color: '#2b7bfb',
|
||||
data: ['车流量'],
|
||||
type: 'rectangle'
|
||||
}
|
||||
},
|
||||
showValueText: true
|
||||
},
|
||||
|
||||
columnChartData2: {
|
||||
@ -462,7 +465,7 @@ export default {
|
||||
'十一月份', '十二月份'
|
||||
],
|
||||
offset: 40,
|
||||
rotate: true
|
||||
rotate: 20
|
||||
},
|
||||
y: {
|
||||
grid: true,
|
||||
|
||||
228
src/views/demo/chart/polylineChartDemo.vue
Normal file
228
src/views/demo/chart/polylineChartDemo.vue
Normal file
@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div>
|
||||
<border-box-7 class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData1" :colors="colors" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" :colors="colors" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
// 折线图与柱状图折线部分相似
|
||||
data: [
|
||||
{
|
||||
data: [32, 30, 55, 24, 33, 25],
|
||||
lineColor: '#3de7c9'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
showValueText: true,
|
||||
// 非必需 数值展示位置偏移量
|
||||
valueTextOffset: [10, -5]
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item">
|
||||
<polyline-chart :data="polylineChartData2" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
99.81, 99.42, 99.56, 99.23, 99.62,
|
||||
99.36, 99.56, '', 99.81, 99.56, ...
|
||||
],
|
||||
lineType: 'dashed',
|
||||
lineDash: [2, 2],
|
||||
lineColor: '#277dfb',
|
||||
pointColor: '#3de7c9',
|
||||
fillColor: ['rgba(40, 125, 252, 0.3)', 'rgba(40, 125, 252, 0)']
|
||||
},
|
||||
{
|
||||
data: [
|
||||
97.81, 97.42, 97.56, 97.23, 97.62,
|
||||
97.36, 97.56, '', 97.81, 97.56, ...
|
||||
],
|
||||
fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: [
|
||||
'10/01', '', '10/03', '', '10/05', '',
|
||||
'10/07', '', '10/09', '', '10/11', '', ...
|
||||
]
|
||||
},
|
||||
y: {
|
||||
min: 96,
|
||||
max: 100,
|
||||
// 数据精度 数据最大最小差值较小时 建议设置精度
|
||||
fixed: 2,
|
||||
num: 10,
|
||||
unit: '%'
|
||||
}
|
||||
}
|
||||
</highlight-code>
|
||||
</div>
|
||||
</border-box-7>
|
||||
|
||||
<border-box-7 class="chart-item" :reverse="true">
|
||||
<polyline-chart :data="polylineChartData3" class="chart" />
|
||||
|
||||
<div class="config-info">
|
||||
<div class="title">Polyline-chart</div>
|
||||
|
||||
<highlight-code>
|
||||
<polyline-chart :data="data" />
|
||||
</highlight-code>
|
||||
|
||||
<highlight-code>
|
||||
data: {
|
||||
data: [
|
||||
{
|
||||
data: [2, 2.5, 3, 6, 3, 2.5, 2],
|
||||
fillColor: ['rgba(255, 38, 214, 0.5)', 'rgba(40, 82, 255, 0.1)']
|
||||
},
|
||||
{
|
||||
data: [3, 2, 4, 5, 4, 2, 3],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
// 非必需 不贴合坐标轴绘制
|
||||
boundaryGap: true
|
||||
}
|
||||
</highlight-code>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PolylineChartDemo',
|
||||
data () {
|
||||
return {
|
||||
polylineChartData1: {
|
||||
data: [
|
||||
{
|
||||
data: [32, 30, 55, 24, 33, 25],
|
||||
lineColor: '#3de7c9'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
|
||||
},
|
||||
y: {
|
||||
},
|
||||
showValueText: true,
|
||||
valueTextOffset: [10, -5]
|
||||
},
|
||||
|
||||
polylineChartData2: {
|
||||
data: [
|
||||
{
|
||||
data: [
|
||||
99.81, 99.42, 99.56, 99.23, 99.62,
|
||||
99.36, 99.56, '', 99.81, 99.56,
|
||||
99.42, 99.56, '', '', 99.36,
|
||||
99.42, '', 99.56, '', '',
|
||||
99.56, 99.23, 99.62
|
||||
],
|
||||
lineType: 'dashed',
|
||||
lineDash: [2, 2],
|
||||
lineColor: '#277dfb',
|
||||
pointColor: '#3de7c9',
|
||||
fillColor: ['rgba(40, 125, 252, 0.3)', 'rgba(40, 125, 252, 0)']
|
||||
},
|
||||
{
|
||||
data: [
|
||||
97.81, 97.42, 97.56, 97.23, 97.62,
|
||||
97.36, 97.56, '', 97.81, 97.56,
|
||||
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)'],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: [
|
||||
'10/01', '', '10/03', '', '10/05', '',
|
||||
'10/07', '', '10/09', '', '10/11', '',
|
||||
'10/13', '', '10/15', '', '10/17', '',
|
||||
'10/19', '', '10/21', '', '10/23'
|
||||
]
|
||||
},
|
||||
y: {
|
||||
min: 96,
|
||||
max: 100,
|
||||
fixed: 2,
|
||||
num: 10,
|
||||
unit: '%'
|
||||
}
|
||||
},
|
||||
|
||||
polylineChartData3: {
|
||||
data: [
|
||||
{
|
||||
data: [2, 2.5, 3, 6, 3, 2.5, 2],
|
||||
fillColor: ['rgba(255, 38, 214, 0.5)', 'rgba(40, 82, 255, 0.1)']
|
||||
},
|
||||
{
|
||||
data: [3, 2, 4, 5, 4, 2, 3],
|
||||
type: 'smoothline'
|
||||
}
|
||||
],
|
||||
x: {
|
||||
data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
|
||||
},
|
||||
labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
|
||||
color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
|
||||
boundaryGap: true
|
||||
},
|
||||
|
||||
colors: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
@ -8,22 +8,17 @@
|
||||
|
||||
<div class="title">使用</div>
|
||||
|
||||
<div class="text-info">你需要将如下文件复制至你的项目内</div>
|
||||
<div class="text-info">./src/plugins</div>
|
||||
<div class="text-info">./src/components</div>
|
||||
<div class="text-info">./src/config</div>
|
||||
<div class="text-info">并在main.js中引入plugins和components</div>
|
||||
<div class="text-info">你需要将DataV文件夹复制至你的项目内</div>
|
||||
<div class="text-info">并在main.js中引入使用</div>
|
||||
|
||||
<highlight-code>
|
||||
// main.js
|
||||
import datavComponents from './components/index.js'
|
||||
import datavPlugins from './plugin/index.js'
|
||||
import dataV from './DataV/index.js'
|
||||
|
||||
Vue.use(datavComponents)
|
||||
Vue.use(datavPlugins)
|
||||
Vue.use(dataV)
|
||||
|
||||
// 可以直接在Views文件夹下的dataView页面直接编写页面
|
||||
// dataView页面已做全屏缩放处理 roterPath: #/datav/view
|
||||
// dataView页面已做全屏缩放处理 routerPath: #/datav/view
|
||||
</highlight-code>
|
||||
|
||||
<div class="text-info">组件具体用法见示例</div>
|
||||
|
||||
Reference in New Issue
Block a user