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'

30
src/menu/index.js
View File

@@ -116,32 +116,6 @@ const demoComponents = {
])('/demo/components/')
}
// 路由菜单 图表
const demoChart = {
path: '/demo/chart',
title: '图表 G2',
icon: 'pie-chart',
children: (pre => [
{ path: `${pre}index`, title: '图表首页' },
{
path: `${pre}demo`,
title: '单图示例',
children: [
{ path: `${pre}demo/areaBase`, title: '区域折线图' },
{ path: `${pre}demo/barBase`, title: '条形图' },
{ path: `${pre}demo/columnBase`, title: '柱形图' },
{ path: `${pre}demo/lineBase`, title: '折线图' },
{ path: `${pre}demo/lineStep`, title: '阶梯折线图' },
{ path: `${pre}demo/nightingaleRoseBase`, title: '南丁格尔玫瑰图' },
{ path: `${pre}demo/PieBase`, title: '饼图' },
{ path: `${pre}demo/radarBase`, title: '雷达图' }
]
},
{ path: `${pre}all`, title: '示例' },
{ path: `${pre}dynamicSize`, title: '动态尺寸与可拖拽' }
])('/demo/chart/')
}
// 路由菜单 组件库
const demoElement = {
path: '/demo/element',
@@ -236,8 +210,7 @@ const demoElement = {
export const side = [
demoPlugins,
demoComponents,
demoElement,
demoChart
demoElement
]
// 菜单 顶栏
@@ -253,7 +226,6 @@ export default [
demoPlugins,
demoComponents,
demoElement,
demoChart,
{
title: '空菜单演示',
icon: 'folder-o',

24
src/mock/chart/G2Area.js
View File

@@ -1,24 +0,0 @@
import Mock from 'mockjs'
import * as fn from './_fn'
Mock.mock('/api/chart/G2Area', 'post', ({body, type, url}) => {
const _body = JSON.parse(body)
switch (_body.type) {
// 基础折线图
case 'base': {
let last = 0
const data = ['3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'].map(x => ({
x,
y: 0
})).map(e => {
e.y = last + fn.r()
last = e.y
return e
})
last = 0
return fn.returnMaker(data)
}
default:
return {}
}
})

14
src/mock/chart/G2Bar.js
View File

@@ -1,14 +0,0 @@
import Mock from 'mockjs'
import * as fn from './_fn'
Mock.mock('/api/chart/G2Bar', 'post', ({body, type, url}) => {
const _body = JSON.parse(body)
switch (_body.type) {
// 基础折线图
case 'base': {
return fn.returnMaker(['中国', '日本', '美国', '法国', '英国'].map(x => ({x, y: fn.r()})).sort((a, b) => a.y - b.y))
}
default:
return {}
}
})

14
src/mock/chart/G2Column.js
View File

@@ -1,14 +0,0 @@
import Mock from 'mockjs'
import * as fn from './_fn'
Mock.mock('/api/chart/G2Column', 'post', ({body, type, url}) => {
const _body = JSON.parse(body)
switch (_body.type) {
// 基础折线图
case 'base': {
return fn.returnMaker(['3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'].map(x => ({x, y: fn.r()})))
}
default:
return {}
}
})

28
src/mock/chart/G2Line.js
View File

@@ -1,28 +0,0 @@
import Mock from 'mockjs'
import * as fn from './_fn'
Mock.mock('/api/chart/G2Line', 'post', ({body, type, url}) => {
const _body = JSON.parse(body)
switch (_body.type) {
// 基础折线图
case 'base': {
let last = 0
const data = ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018'].map(x => ({
x,
y: 0
})).map(e => {
e.y = last + fn.r()
last = e.y
return e
})
last = 0
return fn.returnMaker(data)
}
// 阶梯折线图
case 'step': {
return fn.returnMaker(['3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'].map(x => ({x, y: fn.r()})))
}
default:
return {}
}
})

14
src/mock/chart/G2NightingaleRose.js
View File

@@ -1,14 +0,0 @@
import Mock from 'mockjs'
import * as fn from './_fn'
Mock.mock('/api/chart/G2NightingaleRose', 'post', ({body, type, url}) => {
const _body = JSON.parse(body)
switch (_body.type) {
// 基础南丁格尔玫瑰图
case 'base': {
return fn.returnMaker(['中国', '日本', '美国', '法国', '英国'].map(e => ({item: e, count: 100 + fn.r()})))
}
default:
return {}
}
})

14
src/mock/chart/G2Pie.js
View File

@@ -1,14 +0,0 @@
import Mock from 'mockjs'
import * as fn from './_fn'
Mock.mock('/api/chart/G2Pie', 'post', ({body, type, url}) => {
const _body = JSON.parse(body)
switch (_body.type) {
// 基础饼图
case 'base': {
return fn.returnMaker(['中国', '日本', '美国', '法国', '英国'].map(e => ({item: e, count: fn.r()})))
}
default:
return {}
}
})

18
src/mock/chart/G2Radar.js
View File

@@ -1,18 +0,0 @@
import Mock from 'mockjs'
import * as fn from './_fn'
Mock.mock('/api/chart/G2Radar', 'post', ({body, type, url}) => {
const _body = JSON.parse(body)
switch (_body.type) {
// 基础折线图
case 'base': {
return fn.returnMaker(['中国', '日本', '美国', '法国', '英国'].map(e => ({
item: e,
a: fn.r(),
b: fn.r()
})))
}
default:
return {}
}
})

11
src/mock/chart/_fn.js
View File

@@ -1,11 +0,0 @@
export const r = (add = 0) => {
return Math.round(Math.random() * 100) + add
}
export const returnMaker = (data = []) => {
return {
code: 0,
msg: '请求成功',
data
}
}

7
src/mock/chart/register.js
View File

@@ -1,7 +0,0 @@
import './G2Area'
import './G2Bar'
import './G2Column'
import './G2Line'
import './G2NightingaleRose'
import './G2Pie'
import './G2Radar'

2
src/mock/register.js
View File

@@ -4,8 +4,6 @@ import '@/mock/ajax-demo'
import '@/mock/login'
import '@/mock/chart/register.js'
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({
timeout: '300-600'

52
src/pages/demo/chart/all/components/d2-demo-chart-card-header.vue
View File

@@ -1,52 +0,0 @@
<template>
<div>
{{title}}
<span class="d2-fr">
<d2-icon
class="chart-card-header-icon"
:class="{active}"
name="refresh"
@click.native="handleRefresh">
</d2-icon>
</span>
</div>
</template>
<script>
export default {
name: 'd2-demo-chart-card-header',
props: {
title: {
type: String,
required: false,
default: ''
}
},
data () {
return {
active: false
}
},
methods: {
handleRefresh () {
this.active = true
setTimeout(() => {
this.active = false
}, 1000)
this.$emit('refresh')
}
}
}
</script>
<style lang="scss">
@import '~@/assets/style/public.scss';
.chart-card-header-icon {
color: $color-text-sub;
transition: all .3s;
&.active {
transform: rotate(360deg);
}
}
</style>

166
src/pages/demo/chart/all/index.vue
View File

@@ -1,166 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true" class="demo-chart-index">
<el-row :gutter="20">
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(0)" title="<d2-chart-line-base/>"></d2-demo-chart-card-header>
<d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(1)" title="<d2-chart-line-step/>"></d2-demo-chart-card-header>
<d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(2)" title="<d2-chart-column-base/>"></d2-demo-chart-card-header>
<d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(3)" title="<d2-chart-bar-base/>"></d2-demo-chart-card-header>
<d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(4)" title="<d2-chart-pie-base/>"></d2-demo-chart-card-header>
<d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(5)" title="<d2-chart-nightingale-rose-base/>"></d2-demo-chart-card-header>
<d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(6)" title="<d2-chart-radar-base/>"></d2-demo-chart-card-header>
<d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
</el-card>
</el-col>
<el-col class="col" :span="8">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(7)" title="<d2-chart-area-base/>"></d2-demo-chart-card-header>
<d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
</el-card>
</el-col>
</el-row>
</d2-container>
</template>
<script>
export default {
components: {
'd2-demo-chart-card-header': () => import('./components/d2-demo-chart-card-header')
},
data () {
return {
chart: [
{
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
refName: 'd2-chart-line-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
refName: 'd2-chart-line-step',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
refName: 'd2-chart-column-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
refName: 'd2-chart-bar-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
refName: 'd2-chart-pie-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
refName: 'd2-chart-nightingale-rose-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
refName: 'd2-chart-radar-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
refName: 'd2-chart-area-base',
ready: false,
data: []
}
]
}
},
computed: {
// 所有的图表已经 mounted
ready () {
return !this.chart.find(e => !e.ready)
}
},
watch: {
// 在所有的图表 mounted 后加载数据
ready (ready) {
if (ready) {
this.syncData()
this.showInfo()
}
}
},
methods: {
// 显示提示
showInfo () {
this.$notify({
title: '提示',
message: '点击卡片右上角的刷新按钮可以重新载入某个图表的数据',
duration: 10000
})
},
// 图表 mounted
isReady (index) {
this.chart[index].ready = true
},
// 请求图表数据
syncData () {
this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
.then(this.$axios.spread((...res) => {
res.forEach((e, index) => {
this.chart[index].data = e
})
}))
},
// 用户触发了卡片右上角的刷新按钮
handleRefreshData (index) {
const api = this.chart[index].api
this.$axios.post(api.url, api.data)
.then(res => {
this.chart[index].data = res
})
}
}
}
</script>
<style lang="scss">
@import './style.scss';
</style>

21
src/pages/demo/chart/all/style.scss
View File

@@ -1,21 +0,0 @@
@import '~@/assets/style/public.scss';
.demo-chart-index {
.col {
height: 340px;
margin-bottom: 20px;
.el-card {
@extend %unable-select;
height: 100%;
.el-card__body {
height: 100%;
padding: 0px;
}
// 有header的卡片的body高度需要减去header
&.header-in {
.el-card__body {
height: calc(100% - 59px);
}
}
}
}
}

33
src/pages/demo/chart/demo/PieBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-pie-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-pie-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Pie',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/areaBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-area-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-area-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Area',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/barBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-bar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-bar-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Bar',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/columnBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-column-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-column-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Column',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

66
src/pages/demo/chart/demo/components/d2-demo-chart-card.vue
View File

@@ -1,66 +0,0 @@
<template>
<el-card shadow="never">
<div slot="header">
<el-button type="primary" size="mini" @click="syncData">
<d2-icon name="refresh"/>
加载数据
</el-button>
<el-radio-group v-model="height" size="mini">
<el-radio-button v-for="(item, index) in heightOptions" :key="index" :label="item">{{item}}px</el-radio-button>
</el-radio-group>
</div>
<div :style="style">
<slot :data="data"/>
</div>
</el-card>
</template>
<script>
export default {
props: {
api: {
type: Object,
required: false,
default: () => ({})
}
},
data () {
return {
data: [],
height: 400,
heightOptions: [300, 400, 500, 600]
}
},
computed: {
style () {
return {
height: this.height + 'px'
}
}
},
watch: {
style () {
this.resize()
}
},
mounted () {
// 自动请求一次数据
this.syncData()
},
methods: {
// 请求数据
syncData () {
this.$axios.post(this.api.url, this.api.data)
.then(res => {
this.data = res
})
},
// 重新适应大小
resize () {
this.$nextTick(() => {
this.$emit('resize')
})
}
}
}
</script>

33
src/pages/demo/chart/demo/lineBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-line-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Line',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/lineStep.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-line-step slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-step>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Line',
data: {
type: 'step'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

6
src/pages/demo/chart/demo/mixins/public.js
View File

@@ -1,6 +0,0 @@
import d2DemoChartCard from '../components/d2-demo-chart-card.vue'
export default {
components: {
'd2-demo-chart-card': d2DemoChartCard
}
}

33
src/pages/demo/chart/demo/nightingaleRoseBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-nightingale-rose-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-nightingale-rose-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2NightingaleRose',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

33
src/pages/demo/chart/demo/radarBase.vue
View File

@@ -1,33 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true">
<d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
<d2-chart-radar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-radar-base>
</d2-demo-chart-card>
</d2-container>
</template>
<script>
import publicMixin from './mixins/public'
export default {
mixins: [
publicMixin
],
data () {
return {
// 给卡片容器的参数
card: {
api: {
url: '/api/chart/G2Radar',
data: {
type: 'base'
}
}
},
// 给图表的参数
chart: {
// 图表设置
}
}
}
}
</script>

52
src/pages/demo/chart/dynamicSize/components/d2-demo-chart-card-header.vue
View File

@@ -1,52 +0,0 @@
<template>
<div>
{{title}}
<span class="d2-fr">
<d2-icon
class="chart-card-header-icon"
:class="{active}"
name="refresh"
@click.native="handleRefresh">
</d2-icon>
</span>
</div>
</template>
<script>
export default {
name: 'd2-demo-chart-card-header',
props: {
title: {
type: String,
required: false,
default: ''
}
},
data () {
return {
active: false
}
},
methods: {
handleRefresh () {
this.active = true
setTimeout(() => {
this.active = false
}, 1000)
this.$emit('refresh')
}
}
}
</script>
<style lang="scss">
@import '~@/assets/style/public.scss';
.chart-card-header-icon {
color: $color-text-sub;
transition: all .3s;
&.active {
transform: rotate(360deg);
}
}
</style>

209
src/pages/demo/chart/dynamicSize/index.vue
View File

@@ -1,209 +0,0 @@
<template>
<d2-container type="ghost" :responsive="true" class="demo-chart-index">
<d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></d2-demo-chart-card-header>
<d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></d2-demo-chart-card-header>
<d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></d2-demo-chart-card-header>
<d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></d2-demo-chart-card-header>
<d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></d2-demo-chart-card-header>
<d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></d2-demo-chart-card-header>
<d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></d2-demo-chart-card-header>
<d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
</el-card>
</d2-grid-item>
<!-- 卡片 -->
<d2-grid-item v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
<el-card shadow="never" class="header-in">
<d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></d2-demo-chart-card-header>
<d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
</el-card>
</d2-grid-item>
</d2-grid-layout>
</d2-container>
</template>
<script>
export default {
components: {
'd2-demo-chart-card-header': () => import('./components/d2-demo-chart-card-header')
},
data () {
return {
chart: [
{
api: {url: '/api/chart/G2Line', data: {type: 'base'}},
refName: 'd2-chart-line-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Line', data: {type: 'step'}},
refName: 'd2-chart-line-step',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Column', data: {type: 'base'}},
refName: 'd2-chart-column-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
refName: 'd2-chart-bar-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
refName: 'd2-chart-pie-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
refName: 'd2-chart-nightingale-rose-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
refName: 'd2-chart-radar-base',
ready: false,
data: []
},
{
api: {url: '/api/chart/G2Area', data: {type: 'base'}},
refName: 'd2-chart-area-base',
ready: false,
data: []
}
],
layout: {
// 调整布局时 复制 layoutUpdatedHandler() 输出的日志到这里
layout: [
{'x': 7, 'y': 8, 'w': 5, 'h': 8, 'i': '0'},
{'x': 4, 'y': 16, 'w': 4, 'h': 7, 'i': '1'},
{'x': 8, 'y': 16, 'w': 4, 'h': 7, 'i': '2'},
{'x': 0, 'y': 16, 'w': 4, 'h': 7, 'i': '3'},
{'x': 3, 'y': 8, 'w': 4, 'h': 8, 'i': '4'},
{'x': 9, 'y': 0, 'w': 3, 'h': 8, 'i': '5'},
{'x': 0, 'y': 8, 'w': 3, 'h': 8, 'i': '6'},
{'x': 0, 'y': 0, 'w': 9, 'h': 8, 'i': '7'}
],
colNum: 12,
rowHeight: 30,
isDraggable: true,
isResizable: true,
isMirrored: false,
verticalCompact: true,
margin: [10, 10],
useCssTransforms: true
}
}
},
computed: {
// 所有的图表已经 mounted
ready () {
return !this.chart.find(e => !e.ready)
}
},
watch: {
// 在所有的图表 mounted 后加载数据
ready (ready) {
if (ready) {
this.syncData()
this.showInfo()
}
}
},
methods: {
// 显示提示
showInfo () {
this.$notify({
title: '提示',
message: '你可以按住卡片标题拖拽卡片；或者在每个卡片的右下角拖动，调整大小检查图表尺寸的自适应效果',
duration: 10000
})
},
// 图表 mounted
isReady (index) {
this.chart[index].ready = true
},
// 请求图表数据
syncData () {
this.$axios.all(this.chart.map(e => this.$axios.post(e.api.url, e.api.data)))
.then(this.$axios.spread((...res) => {
res.forEach((e, index) => {
this.chart[index].data = e
})
}))
},
// 布局组件发生变化
layoutUpdatedHandler (newLayout) {
console.group('layoutUpdatedHandler')
newLayout.forEach(e => {
console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
})
console.groupEnd()
},
// 改变尺寸完成
handleResized (name) {
this.$nextTick(() => {
this.$refs[name].resize()
})
},
// 用户触发了卡片右上角的刷新按钮
handleRefreshData (index) {
const api = this.chart[index].api
this.$axios.post(api.url, api.data)
.then(res => {
this.chart[index].data = res
})
}
}
}
</script>
<style lang="scss">
@import './style.scss';
</style>

28
src/pages/demo/chart/dynamicSize/style.scss
View File

@@ -1,28 +0,0 @@
@import '~@/assets/style/public.scss';
.demo-chart-index {
.vue-grid-layout {
margin: -10px;
.el-card {
@extend %unable-select;
height: 100%;
.el-card__body {
height: 100%;
padding: 0px;
}
// 有header的卡片的body高度需要减去header
&.header-in {
.el-card__body {
height: calc(100% - 59px);
}
}
}
.vue-resizable-handle {
bottom: 6px;
right: 6px;
opacity: .3;
&:hover{
opacity: 1;
}
}
}
}

9
src/pages/demo/chart/index/index.vue
View File

@@ -1,9 +0,0 @@
<template>
<d2-container type="full">
<d2-demo-page-cover
title="内置 G2 图表库"
sub-title="如果用不到 建议删除相关代码和依赖">
<img :src="`${$assetsPublicPath}static/image/icon/500/chart.png`">
</d2-demo-page-cover>
</d2-container>
</template>

2
src/router/index.js.REMOVED.git-id
View File

@@ -1 +1 @@
919c478f2e165432104d6811b3b855f7b049ea39
89e063c3ddd8c257b9e34b7c88bc6d39efbc4ad5