center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(视图): echarts组件封装，初步实现

Browse Source
This commit is contained in:
junjie 2021-03-11 15:06:13 +08:00
parent faeedeb1e9
commit 00bce0ee7e
4 changed files with 95 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/views/chart/chart/chart.js
View File

@ -15,6 +15,23 @@ export const BASE_BAR = {
series: []
}
export default {
BASE_BAR
export const BASE_LINE = {
title: {
text: ''
},
tooltip: {},
legend: {
data: []
},
xAxis: {
data: []
},
yAxis: {
type: 'value'
},
series: []
}
export default {
BASE_BAR, BASE_LINE
}

65
frontend/src/views/chart/components/ChartComponent.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
<div id="echart" style="width: 100%;height: 80vh;" />
</div>
</template>
<script>
import { BASE_BAR, BASE_LINE } from '../chart/chart'
export default {
name: 'ChartComponent',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {}
},
watch: {
chart() {
this.drawEcharts()
}
},
mounted() {
},
methods: {
drawEcharts() {
const chart = this.chart
let chart_option = {}
// todo type
if (chart.type === 'bar') {
chart_option = JSON.parse(JSON.stringify(BASE_BAR))
} else if (chart.type === 'line') {
chart_option = JSON.parse(JSON.stringify(BASE_LINE))
}
// console.log(chart_option);
if (chart.data) {
chart_option.title.text = chart.title
chart_option.xAxis.data = chart.data.x
chart.data.series.forEach(function(y) {
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
})
}
// console.log(chart_option);
this.myEcharts(chart_option)
},
myEcharts(option) {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echart'))
// 指定图表的配置项和数据
setTimeout(myChart.setOption(option, true), 500)
window.onresize = function() {
myChart.resize()
}
}
}
}
</script>
<style scoped>
</style>

4
frontend/src/views/chart/components/QuotaItem.vue
View File

@ -5,7 +5,7 @@
<span
class="item-axis"
>
{{ item.name }}<span class="summary-span">({{ $t('chart.'+item.summary) }})</span><i class="el-icon-arrow-down el-icon--right" />
{{ item.name }}<span class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
<span />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-notebook-2">
@ -50,7 +50,7 @@ export default {
},
methods: {
summary(param) {
console.log(param)
// console.log(param)
this.item.summary = param.type
this.$emit('onQuotaSummaryChange', this.item)
},

62
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -31,7 +31,7 @@
@start="start1"
>
<transition-group>
<span v-for="item in dimension" :key="item.id" class="item" @click="click1(item)">{{ item.name }}</span>
<span v-for="item in dimension" :key="item.id" class="item">{{ item.name }}</span>
</transition-group>
</draggable>
</div>
@ -47,7 +47,7 @@
@start="start1"
>
<transition-group>
<span v-for="item in quota" :key="item.id" class="item" @click="click2(item)">{{ item.name }}</span>
<span v-for="item in quota" :key="item.id" class="item">{{ item.name }}</span>
</transition-group>
</draggable>
</div>
@ -131,9 +131,7 @@
</el-row>
</el-row>
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
<div id="echart" style="width: 100%;height: 80vh;" />
</div>
<chart-component :chart="chart" />
</el-row>
</el-col>
</el-row>
@ -143,13 +141,13 @@
<script>
import { post } from '@/api/dataset/dataset'
import draggable from 'vuedraggable'
import { BASE_BAR } from '../chart/chart'
import DimensionItem from '../components/DimensionItem'
import QuotaItem from '../components/QuotaItem'
import ChartComponent from '../components/ChartComponent'
export default {
name: 'ChartEdit',
components: { QuotaItem, DimensionItem, draggable },
components: { ChartComponent, QuotaItem, DimensionItem, draggable },
data() {
return {
table: {},
@ -173,7 +171,8 @@ export default {
arr2: [
{ id: 11, name: '容量' }
],
moveId: -1
moveId: -1,
chart: {}
}
},
computed: {
@ -225,26 +224,6 @@ export default {
this.quota = response.data.quota
})
},
click1(item) {
// console.log(item);
const c = this.view.xaxis.filter(function(ele) {
return ele.id === item.id
})
// console.log(c);
if (c && c.length === 0) {
this.view.xaxis.push(item)
}
},
click2(item) {
// console.log(item);
const c = this.view.yaxis.filter(function(ele) {
return ele.id === item.id
})
// console.log(c);
if (c && c.length === 0) {
this.view.yaxis.push(item)
}
},
get(id) {
if (id) {
post('/chart/view/get/' + id, null).then(response => {
@ -290,20 +269,8 @@ export default {
this.view = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
const chart = response.data
const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
// console.log(chart_option);
if (chart.data) {
chart_option.title.text = chart.title
chart_option.xAxis.data = chart.data.x
chart.data.series.forEach(function(y) {
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
})
}
// console.log(chart_option);
this.myEcharts(chart_option)
// 将视图传入echart组件
this.chart = response.data
})
} else {
this.view = {}
@ -391,7 +358,6 @@ export default {
},
quotaSummaryChange(item) {
console.log(item)
// 更新item
this.view.yaxis.forEach(function(ele) {
if (ele.id === item.id) {
@ -399,16 +365,6 @@ export default {
}
})
this.save()
},
myEcharts(option) {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echart'))
// 指定图表的配置项和数据
setTimeout(myChart.setOption(option, true), 500)
window.onresize = function() {
myChart.resize()
}
}
}
}