no message
Former-commit-id: 57f7ce520d781e84dca02cbf2eb0287746283182 Former-commit-id: 850e8ec2c0516db7bd021b5c9befa5a56d5b5b54 Former-commit-id: 2491c0df8751f62d1bc5ce53fb52a0ac8395b752
This commit is contained in:
李杨
@@ -1,42 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="chart" style="height: 100%;"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import G2Mixin from '@/components/G2/mixins/G2.js'
|
|
||||||
export default {
|
|
||||||
mixins: [
|
|
||||||
G2Mixin
|
|
||||||
],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
// 在组件 mounted 后立即初始化图表
|
|
||||||
// autoInit: false,
|
|
||||||
// [图表设置项] padding
|
|
||||||
padding: [30, 40, 50, 50]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 初始化图表
|
|
||||||
initHandler () {
|
|
||||||
this.creatChart()
|
|
||||||
this.chart.source(this.data)
|
|
||||||
this.chart.scale('sales', {
|
|
||||||
tickInterval: 20
|
|
||||||
})
|
|
||||||
this.chart.interval().position('year*sales')
|
|
||||||
this.chart.render()
|
|
||||||
},
|
|
||||||
// 数据源改变 重新渲染新的数据
|
|
||||||
changeData () {
|
|
||||||
if (this.chart) {
|
|
||||||
// 已经初始化过图表 更新数据
|
|
||||||
this.chart.changeData(this.data)
|
|
||||||
} else {
|
|
||||||
// 没有图表 新创建一个实例
|
|
||||||
this.initHandler()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="chart" style="height: 100%;"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import G2Mixin from '@/components/G2/mixins/G2.js'
|
|
||||||
export default {
|
|
||||||
mixins: [
|
|
||||||
G2Mixin
|
|
||||||
],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
// 在组件 mounted 后立即初始化图表
|
|
||||||
autoInit: false,
|
|
||||||
// [图表设置项] padding
|
|
||||||
padding: [30, 40, 50, 50]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 初始化图表
|
|
||||||
initHandler () {
|
|
||||||
this.creatChart()
|
|
||||||
this.chart.source(this.data)
|
|
||||||
this.chart.scale('value', {
|
|
||||||
min: 0
|
|
||||||
})
|
|
||||||
this.chart.scale('year', {
|
|
||||||
range: [0, 1]
|
|
||||||
})
|
|
||||||
this.chart.tooltip({
|
|
||||||
crosshairs: {
|
|
||||||
type: 'line'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.chart.line().position('year*value')
|
|
||||||
this.chart.point().position('year*value').size(4).shape('circle').style({
|
|
||||||
stroke: '#fff',
|
|
||||||
lineWidth: 1
|
|
||||||
})
|
|
||||||
this.chart.render()
|
|
||||||
},
|
|
||||||
// 数据源改变 重新渲染新的数据
|
|
||||||
changeData () {
|
|
||||||
if (this.chart) {
|
|
||||||
// 已经初始化过图表 更新数据
|
|
||||||
this.chart.changeData(this.data)
|
|
||||||
} else {
|
|
||||||
// 没有图表 新创建一个实例
|
|
||||||
this.initHandler()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="chart" style="height: 100%;"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import G2Mixin from '@/components/G2/mixins/G2.js'
|
|
||||||
export default {
|
|
||||||
mixins: [
|
|
||||||
G2Mixin
|
|
||||||
],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
// [图表设置项] padding
|
|
||||||
padding: [60, 60, 110, 60],
|
|
||||||
// 在组件 mounted 后立即初始化图表
|
|
||||||
// autoInit: false,
|
|
||||||
// DataView数据转换设置
|
|
||||||
transformSetting: {
|
|
||||||
type: 'percent',
|
|
||||||
field: 'count',
|
|
||||||
dimension: 'item',
|
|
||||||
as: 'percent'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
dvMaker () {
|
|
||||||
return new this.DataSet.DataView().source(this.data).transform(this.transformSetting)
|
|
||||||
},
|
|
||||||
// 初始化图表
|
|
||||||
initHandler () {
|
|
||||||
this.creatChart()
|
|
||||||
this.chart.source(this.dvMaker(), {
|
|
||||||
percent: {
|
|
||||||
formatter: val => {
|
|
||||||
val = (val * 100) + '%'
|
|
||||||
return val
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.chart.coord('theta', {
|
|
||||||
radius: 0.75
|
|
||||||
})
|
|
||||||
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) => {
|
|
||||||
return item.point.item + ': ' + val
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.tooltip('item*percent', (item, percent) => {
|
|
||||||
percent = percent * 100 + '%'
|
|
||||||
return {
|
|
||||||
name: item,
|
|
||||||
value: percent
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.style({
|
|
||||||
lineWidth: 1,
|
|
||||||
stroke: '#fff'
|
|
||||||
})
|
|
||||||
this.chart.render()
|
|
||||||
},
|
|
||||||
// 数据源改变 重新渲染新的数据
|
|
||||||
changeData () {
|
|
||||||
if (this.chart) {
|
|
||||||
// 已经初始化过图表 更新数据
|
|
||||||
this.chart.changeData(this.dvMaker())
|
|
||||||
} else {
|
|
||||||
// 没有图表 新创建一个实例
|
|
||||||
this.initHandler()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
|
|
||||||
Vue.component('G2Line1', resolve => { require(['@/components/G2/charts/Line/1.vue'], resolve) })
|
|
||||||
Vue.component('G2Pie1', resolve => { require(['@/components/G2/charts/Pie/1.vue'], resolve) })
|
|
||||||
Vue.component('G2Column1', resolve => { require(['@/components/G2/charts/Column/1.vue'], resolve) })
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
import G2 from '@antv/g2'
|
|
||||||
import * as DataSet from '@antv/data-set'
|
|
||||||
|
|
||||||
// 关闭 G2 的体验改进计划打点请求
|
|
||||||
G2.track(false)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
// 图表数据
|
|
||||||
data: {
|
|
||||||
type: Array,
|
|
||||||
required: false,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
// [图表设置项] 高度
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 300
|
|
||||||
},
|
|
||||||
// [图表设置项] 开启自动填充父元素高度
|
|
||||||
autoHeight: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// [图表设置项] 自动宽度
|
|
||||||
forceFit: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
// 在页面中不需要再引入 直接使用 this.G2
|
|
||||||
G2,
|
|
||||||
// 数据处理模块
|
|
||||||
DataSet,
|
|
||||||
// 图表实例
|
|
||||||
chart: null,
|
|
||||||
// 在组件 mounted 后立即初始化图表
|
|
||||||
autoInit: true,
|
|
||||||
// [图表设置项] padding
|
|
||||||
padding: [40, 40, 40, 40]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
// 如果设置了在 mounted 后自动初始化 就在这里初始化
|
|
||||||
if (this.autoInit) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.initHandler()
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
// 数据改变
|
|
||||||
data () {
|
|
||||||
this.changeData()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 创建图表对象
|
|
||||||
creatChart () {
|
|
||||||
this.chart = new this.G2.Chart({
|
|
||||||
container: this.$refs.chart,
|
|
||||||
forceFit: this.forceFit,
|
|
||||||
height: this.G2.DomUtil.getHeight(this.$refs.chart),
|
|
||||||
padding: this.padding
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 重绘大小
|
|
||||||
resize (width, height) {
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.changeSize(width || this.G2.DomUtil.getWidth(this.$refs.chart), height || this.G2.DomUtil.getHeight(this.$refs.chart))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Container type="ghost" :responsive="true" class="demo-chart-index">
|
|
||||||
<GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
|
|
||||||
<GridItem v-bind="layout.layout[0]" @resize="resizeHandler('G2Line1')" @resized="resizedHandler('G2Line1')">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<div slot="header">近年趋势</div>
|
|
||||||
<G2Line1 ref="G2Line1" :data="chartData.G2Line1"></G2Line1>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<GridItem v-bind="layout.layout[1]" @resize="resizeHandler('G2Pie1')" @resized="resizedHandler('G2Pie1')">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<div slot="header">人员分布</div>
|
|
||||||
<G2Pie1 ref="G2Pie1" :data="chartData.G2Pie1"></G2Pie1>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
<GridItem v-bind="layout.layout[2]" @resize="resizeHandler('G2Column1')" @resized="resizedHandler('G2Column1')">
|
|
||||||
<el-card class="header-in">
|
|
||||||
<div slot="header">人员分布</div>
|
|
||||||
<G2Column1 ref="G2Column1" :data="chartData.G2Column1"></G2Column1>
|
|
||||||
</el-card>
|
|
||||||
</GridItem>
|
|
||||||
</GridLayout>
|
|
||||||
</Container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import layout from './mixins/layout'
|
|
||||||
import chart from './mixins/chart'
|
|
||||||
export default {
|
|
||||||
mixins: [
|
|
||||||
layout,
|
|
||||||
chart
|
|
||||||
]
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import './style.scss';
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
// 数据
|
|
||||||
chartData: {
|
|
||||||
G2Line1: [],
|
|
||||||
G2Pie1: [],
|
|
||||||
G2Column1: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
// 请求图表数据
|
|
||||||
this.syncData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 请求图表数据
|
|
||||||
syncData () {
|
|
||||||
const api = [
|
|
||||||
{url: '/api/chart/G2Line', data: {code: 1}},
|
|
||||||
{url: '/api/chart/G2Pie', data: {code: 1}},
|
|
||||||
{url: '/api/chart/G2Column', data: {code: 1}}
|
|
||||||
]
|
|
||||||
this.$axios.all(api.map(e => this.$axios.post(e.url, e.data)))
|
|
||||||
.then(this.$axios.spread((G2Line1, G2Pie1, G2Column1) => {
|
|
||||||
this.chartData = {
|
|
||||||
G2Line1,
|
|
||||||
G2Pie1,
|
|
||||||
G2Column1
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
layout: {
|
|
||||||
layout: [
|
|
||||||
{'x': 0, 'y': 0, 'w': 8, 'h': 9, 'i': '0'},
|
|
||||||
{'x': 8, 'y': 0, 'w': 4, 'h': 9, 'i': '1'},
|
|
||||||
{'x': 0, 'y': 9, 'w': 4, 'h': 7, 'i': '2'}
|
|
||||||
],
|
|
||||||
colNum: 12,
|
|
||||||
rowHeight: 30,
|
|
||||||
isDraggable: true,
|
|
||||||
isResizable: true,
|
|
||||||
isMirrored: false,
|
|
||||||
verticalCompact: true,
|
|
||||||
margin: [10, 10],
|
|
||||||
useCssTransforms: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
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()
|
|
||||||
},
|
|
||||||
// 改变尺寸
|
|
||||||
resizeHandler (name) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs[name].resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 改变尺寸完成
|
|
||||||
resizedHandler (name) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs[name].resize()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user