sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

no message

Browse Source 
Former-commit-id: 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 2ac08bdf73416d40f32a3f7965369cb28d4329d3 [formerly 7edbaec35ed1435f9b321dc93a6fc638390e62c1 [formerly 2b79008703fe8c1f2dfc0e74d07589f55f68fa15]]]]]
Former-commit-id: 43f9f620117aa19760d79743b2358e02473f45e6
Former-commit-id: 447bd2d9ae835cc47ceab1283c3b24a5406a234e
Former-commit-id: 0d221eda984865e1d036159f6d92c2858634055c [formerly b6c26e2313ea3786c93d68c6394e4b2c59bdbe17]
Former-commit-id: 79fdc885d3dc2a91ec43a48a11242c8a9f3ffdb1
Former-commit-id: 0959cb5dcdfe874efcb14c4ad8ed2fd5a1886516
Former-commit-id: c7cee26e0b0a5dd22d724c43c0e92828d84fab99
Former-commit-id: f75348850386038a04efa082a8bf71d5d5663f6b
Former-commit-id: 65e82442f2b596e30e183f0522bb4e3a64408738
This commit is contained in:
liyang
2018-06-26 22:20:59 +08:00
parent 9832c730b6
commit 51186622f6
49 changed files with 150 additions and 1677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/charts/G2/components/Area/base.vue
View File

@@ -1,43 +0,0 @@
<template>
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
<div ref="chart" style="height: 100%;"></div>
</template>
<script>
import G2 from '@/components/charts/G2/mixins/G2.js'
export default {
mixins: [
G2
],
methods: {
// 初始化图表
init () {
// mixin 中提供 creatChart
this.creatChart()
// 本组件的特殊设置
this.chart.source(this.data)
this.chart.scale({
y: {
min: 0
},
x: {
range: [0, 1]
}
})
this.chart.tooltip({
crosshairs: {
type: 'line'
}
})
this.chart.area().position('x*y')
this.chart.line().position('x*y').size(2)
// 渲染图表
this.chart.render()
},
// 数据源改变 重新渲染新的数据
changeData () {
this.chart.changeData(this.data)
}
}
}
</script>

35
src/components/charts/G2/components/Bar/base.vue
View File

@@ -1,35 +0,0 @@
<template>
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
<div ref="chart" style="height: 100%;"></div>
</template>
<script>
import G2 from '@/components/charts/G2/mixins/G2.js'
export default {
mixins: [
G2
],
methods: {
// 初始化图表
init () {
// mixin 中提供 creatChart
this.creatChart()
// 本组件的特殊设置
this.chart.source(this.data)
this.chart.axis('x', {
label: {
offset: 12
}
})
this.chart.coord().transpose()
this.chart.interval().position('x*y')
// 渲染图表
this.chart.render()
},
// 数据源改变 重新渲染新的数据
changeData () {
this.chart.changeData(this.data)
}
}
}
</script>

32
src/components/charts/G2/components/Column/base.vue
View File

@@ -1,32 +0,0 @@
<template>
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
<div ref="chart" style="height: 100%;"></div>
</template>
<script>
import G2 from '@/components/charts/G2/mixins/G2.js'
export default {
mixins: [
G2
],
methods: {
// 初始化图表
init () {
// mixin 中提供 creatChart
this.creatChart()
// 本组件的特殊设置
this.chart.source(this.data)
this.chart.scale('y', {
tickInterval: 20
})
this.chart.interval().position('x*y')
// 渲染图表
this.chart.render()
},
// 数据源改变 重新渲染新的数据
changeData () {
this.chart.changeData(this.data)
}
}
}
</script>

44
src/components/charts/G2/components/Line/base.vue
View File

@@ -1,44 +0,0 @@
<template>
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
<div ref="chart" style="height: 100%;"></div>
</template>
<script>
import G2 from '@/components/charts/G2/mixins/G2.js'
export default {
mixins: [
G2
],
methods: {
// 初始化图表
init () {
// mixin 中提供 creatChart
this.creatChart()
// 本组件的特殊设置
this.chart.source(this.data)
this.chart.scale('y', {
min: 0
})
this.chart.scale('x', {
range: [0, 1]
})
this.chart.tooltip({
crosshairs: {
type: 'line'
}
})
this.chart.line().position('x*y')
this.chart.point().position('x*y').size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
})
// 渲染图表
this.chart.render()
},
// 数据源改变 重新渲染新的数据
changeData () {
this.chart.changeData(this.data)
}
}
}
</script>

33
src/components/charts/G2/components/Line/step.vue
View File

@@ -1,33 +0,0 @@
<template>
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
<div ref="chart" style="height: 100%;"></div>
</template>
<script>
import G2 from '@/components/charts/G2/mixins/G2.js'
export default {
mixins: [
G2
],
methods: {
// 初始化图表
init () {
// mixin 中提供 creatChart
this.creatChart()
// 本组件的特殊设置
this.chart.source(this.data, {
x: {
range: [0, 1]
}
})
this.chart.line().position('x*y').shape('hv')
// 渲染图表
this.chart.render()
},
// 数据源改变 重新渲染新的数据
changeData () {
this.chart.changeData(this.data)
}
}
}
</script>

52
src/components/charts/G2/components/NightingaleRose/base.vue
View File

@@ -1,52 +0,0 @@
<template>
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
<div ref="chart" style="height: 100%;"></div>
</template>
<script>
import G2 from '@/components/charts/G2/mixins/G2.js'
export default {
mixins: [
G2
],
// 新加参数 或者覆盖 mixin 中的默认参数
props: {
padding: {
required: false,
default: () => [40, 40, 40, 40]
}
},
methods: {
// 初始化图表
init () {
// mixin 中提供 creatChart
this.creatChart()
// 本组件的特殊设置
this.chart.source(this.data)
this.chart.coord('polar')
this.chart.axis(false)
// tooltip 设置
this.chart.tooltip({
showTitle: false,
itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
})
// 创建图形
this.chart.interval().position('item*count')
.color('item', this.G2.Global.colors_pie_16)
.label('count', {
formatter: (val, item) => item.point.item + ': ' + val
})
.style({
lineWidth: 1,
stroke: '#fff'
})
// 渲染图表
this.chart.render()
},
// 数据源改变 重新渲染新的数据
changeData () {
this.chart.changeData(this.data)
}
}
}
</script>

77
src/components/charts/G2/components/Pie/base.vue
View File

@@ -1,77 +0,0 @@
<template>
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
<div ref="chart" style="height: 100%;"></div>
</template>
<script>
import G2 from '@/components/charts/G2/mixins/G2.js'
export default {
mixins: [
G2
],
// 新加参数 或者覆盖 mixin 中的默认参数
props: {
padding: {
required: false,
default: () => [40, 40, 40, 40]
}
},
data () {
return {
// DataView数据转换设置
transformSetting: {
type: 'percent',
field: 'count',
dimension: 'item',
as: 'percent'
}
}
},
methods: {
dvMaker () {
return new this.DataSet.DataView().source(this.data).transform(this.transformSetting)
},
// 初始化图表
init () {
// mixin 中提供 creatChart
this.creatChart()
// 本组件的特殊设置
this.chart.source(this.dvMaker(), {
percent: {
formatter: val => (val * 100).toFixed(2) + '%'
}
})
// 设置坐标系
this.chart.coord('theta', {
radius: 0.7
})
// tooltip 设置
this.chart.tooltip({
showTitle: false,
itemTpl: '<li><span style="background-color:{color}" class="g2-tooltip-marker"></span>{name}: {value}</li>'
})
// 创建图形
this.chart.intervalStack()
.position('percent')
.color('item')
.label('percent', {
formatter: (val, item) => item.point.item + ': ' + val
})
.tooltip('item*percent', (item, percent) => ({
name: item,
value: (percent * 100).toFixed(2) + '%'
}))
.style({
lineWidth: 1,
stroke: '#fff'
})
// 渲染图表
this.chart.render()
},
// 数据源改变 重新渲染新的数据
changeData () {
this.chart.changeData(this.dvMaker())
}
}
}
</script>

88
src/components/charts/G2/components/Radar/base.vue
View File

@@ -1,88 +0,0 @@
<template>
<!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%" -->
<div ref="chart" style="height: 100%"></div>
</template>
<script>
import G2 from '@/components/charts/G2/mixins/G2.js'
export default {
mixins: [
G2
],
// 新加参数 或者覆盖 mixin 中的默认参数
props: {
padding: {
required: false,
default: () => [30, 30, 30, 30]
}
},
data () {
return {
// DataView数据转换设置
transformSetting: {
type: 'fold',
fields: ['a', 'b'],
key: 'key',
value: 'value'
}
}
},
methods: {
dvMaker () {
return new this.DataSet.DataView().source(this.data).transform(this.transformSetting)
},
// 初始化图表
init () {
// mixin 中提供 creatChart
this.creatChart()
// 本组件的特殊设置
this.chart.source(this.dvMaker(), {
value: {
min: 0,
max: 100
}
})
this.chart.coord('polar', {
radius: 0.8
})
this.chart.axis('item', {
line: null,
tickLine: null,
grid: {
lineStyle: {
lineDash: null
},
hideFirstLine: false
}
})
this.chart.axis('value', {
line: null,
tickLine: null,
grid: {
type: 'polygon',
lineStyle: {
lineDash: null
}
}
})
this.chart.legend('key', {
marker: 'circle',
offset: 10
})
this.chart.line().position('item*value').color('key').size(2)
this.chart.point().position('item*value').color('key').shape('circle').size(4).style({
stroke: '#fff',
lineWidth: 1,
fillOpacity: 1
})
this.chart.area().position('item*value').color('key')
// 渲染图表
this.chart.render()
},
// 数据源改变 重新渲染新的数据
changeData () {
this.chart.changeData(this.dvMaker())
}
}
}
</script>

123
src/components/charts/G2/mixins/G2.js
View File

@@ -1,123 +0,0 @@
// 所有 G2 图表组件都引用此 mixin
import G2 from '@antv/g2'
import * as DataSet from '@antv/data-set'
// Chart对象属性参数
import propsChart from './props/chart'
// 扩展属性
import propsD2 from './props/d2'
// 工具
const sleep = async (time = 0) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, time)
})
}
// 关闭 G2 的体验改进计划打点请求
G2.track(false)
export default {
props: {
// Chart对象属性参数
...propsChart,
// 扩展属性
...propsD2
},
data () {
return {
// 在页面中不需要再引入 直接使用 this.G2
G2,
// 数据处理模块
DataSet,
// 图表实例
chart: null
}
},
mounted () {
// 如果设置了在 mounted 后自动初始化 就在这里初始化
if (this.autoInit) {
this.startInit()
}
this.$emit('ready')
},
watch: {
// 数据改变
data () {
if (this.chart) {
this.changeData()
} else {
this.startInit()
}
}
},
methods: {
// 开始初始化
async startInit () {
// 延时
await sleep(this.autoInitDelay)
// 初始化
this.$nextTick(() => {
if (this.chart) {
this.chart.destroy()
}
this.init()
})
},
// 创建图表对象
creatChart () {
// http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html
this.chart = new this.G2.Chart({
// 对应图表的 DOM 容器
container: this.$refs.chart,
// 指定图表的宽度
width: this.width,
// 高度
// 设置 autoHeight = true 后取 $refs.chart 的高度
// 设置 autoHeight = false 后取 this.height
height: this.autoHeight ? this.G2.DomUtil.getHeight(this.$refs.chart) : this.height,
// 设置图表的内边距
padding: this.padding,
// 设置图表整体的边框和背景样式
background: this.background,
// 图表绘图区域的边框和背景样式
plotBackground: this.plotBackground,
// 自动宽度
forceFit: this.forceFit,
// 动画开关
animate: this.animate,
// 设置设备像素比
pixelRatio: this.pixelRatio
})
},
// 重绘大小
resize (width, height) {
// 如果已经初始化过图表
if (this.chart) {
const w = width || this.G2.DomUtil.getWidth(this.$refs.chart)
const h = height || this.G2.DomUtil.getHeight(this.$refs.chart)
this.chart.changeSize(w, h)
} else {
// 以后看着办
}
},
// 初始化
init () {
this.$log(
'@/components/charts/G2/mixins/G2.js',
'图表没有正确初始化',
'如果你看到这条消息 请检查是否在图表组件中设置init方法'
)
},
// 更新数据
changeData () {
this.$log(
'@/components/charts/G2/mixins/G2.js',
'图表没有正确刷新数据',
'如果你看到这条消息 请检查是否在图表组件中设置changeData方法'
)
}
}
}

49
src/components/charts/G2/mixins/props/chart.js
View File

@@ -1,49 +0,0 @@
export default {
// 宽度 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_width
width: {
type: Number,
required: false,
default: 400
},
// 高度 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_height
height: {
type: Number,
required: false,
default: 300
},
// 设置图表的内边距 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_padding
padding: {
required: false,
default: () => [30, 40, 40, 50]
},
// 设置图表整体的边框和背景样式 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_background
background: {
type: Object,
required: false,
default: () => ({})
},
// 图表绘图区域的边框和背景样式 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_plotBackground
plotBackground: {
type: Object,
required: false,
default: () => ({})
},
// 图表的宽度自适应开关 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_forceFit
forceFit: {
type: Boolean,
required: false,
default: true
},
// 图表动画开关 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_animate
animate: {
type: Boolean,
required: false,
default: true
},
// 设置设备像素比 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_pixelRatio
pixelRatio: {
type: Number,
required: false,
default: window.devicePixelRatio
}
}

26
src/components/charts/G2/mixins/props/d2.js
View File

@@ -1,26 +0,0 @@
export default {
// 图表数据 此 data 非 官方文档中的 data
data: {
type: Array,
required: false,
default: () => []
},
// 高度 开启自动填充父元素 (非G2自带)
autoHeight: {
type: Boolean,
required: false,
default: true
},
// 在组件 mounted 后自动初始化图表 (非G2自带)
autoInit: {
type: Boolean,
required: false,
default: false
},
// 在组件 mounted 后自动初始化图表的 延时 (非G2自带)
autoInitDelay: {
type: Number,
required: false,
default: 0
}
}

16
src/components/charts/register.js
View File

@@ -1,16 +0,0 @@
import Vue from 'vue'
Vue.component('d2-chart-area-base', () => import('@/components/charts/G2/components/Area/base.vue'))
Vue.component('d2-chart-bar-base', () => import('@/components/charts/G2/components/Bar/base.vue'))
Vue.component('d2-chart-column-base', () => import('@/components/charts/G2/components/Column/base.vue'))
Vue.component('d2-chart-line-base', () => import('@/components/charts/G2/components/Line/base.vue'))
Vue.component('d2-chart-line-step', () => import('@/components/charts/G2/components/Line/step.vue'))
Vue.component('d2-chart-nightingale-rose-base', () => import('@/components/charts/G2/components/NightingaleRose/base.vue'))
Vue.component('d2-chart-pie-base', () => import('@/components/charts/G2/components/Pie/base.vue'))
Vue.component('d2-chart-radar-base', () => import('@/components/charts/G2/components/Radar/base.vue'))

1
src/components/core/d2-layout-main/components/-menu-side/index.vue
View File

@@ -63,7 +63,6 @@ export default {
methods: {
updateAsideHeight () {
this.asideHeight = this.$el.offsetHeight
console.log(this.asideHeight)
}
}
}

4
src/components/core/d2-layout-main/index.vue
View File

@@ -65,7 +65,9 @@ export default {
}),
styleLayoutMainGroup () {
return {
...this.themeBackGroundImage ? {backgroundImage: `url('${this.$assetsPublicPath}${this.themeBackGroundImage}')`} : {}
...this.themeBackGroundImage ? {
backgroundImage: `url('${this.$assetsPublicPath}${this.themeBackGroundImage}')`
} : {}
}
}
},

2
src/components/index.js
View File

@@ -2,5 +2,3 @@
import './core/register'
// 非核心组件 只是在很多演示页面中用到的组件
import './demo/register'
// 图表组件
import './charts/register'