abstract
This commit is contained in:
jiaming
parent
c4298008f2
commit
822f1aaa39
|
|
@ -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>
|
||||||
|
<chart :data="data" :colors="color" />
|
||||||
|
</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>
|
||||||
|
|
@ -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>
|
||||||
|
<column-chart :data="data" :colors="colors" />
|
||||||
|
</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>
|
||||||
|
<column-chart :data="data" :colors="colors" />
|
||||||
|
</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>
|
||||||
|
<column-chart :data="data" :colors="colors" />
|
||||||
|
</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>
|
||||||
|
<column-chart :data="data" :colors="colors" />
|
||||||
|
</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>
|
||||||
|
<column-chart :data="data" :colors="colors" />
|
||||||
|
</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>
|
||||||
|
<column-chart :data="data" :colors="colors" />
|
||||||
|
</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>
|
||||||
|
<column-chart :data="data" :colors="colors" />
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue