260 lines
8.7 KiB
Vue
260 lines
8.7 KiB
Vue
<template>
|
||
<div
|
||
style="width: 100%;height: 100%"
|
||
class="bs-design-wrap bs-custom-component"
|
||
:class="{'light-theme':customTheme === 'light','auto-theme':customTheme !=='light'}"
|
||
>
|
||
<div
|
||
:id="chatId"
|
||
style="width: 100%;height: 100%"
|
||
/>
|
||
<!-- <span style="color:#ffffff">{{config.option.data}}</span>-->
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import 'insert-css'
|
||
import cloneDeep from 'lodash/cloneDeep'
|
||
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
|
||
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
|
||
import { mapState, mapMutations } from 'vuex'
|
||
import * as g2Plot from '@antv/g2plot'
|
||
import plotList, { getCustomPlots } from '../G2Plots/plotList'
|
||
import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
|
||
import _ from 'lodash'
|
||
|
||
export default {
|
||
name: 'PlotCustomComponent',
|
||
mixins: [commonMixins, linkageMixins],
|
||
props: {
|
||
config: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
chart: null,
|
||
hasData: false,
|
||
plotList
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState('bigScreen', {
|
||
pageInfo: state => state.pageInfo,
|
||
customTheme: state => state.pageInfo.pageConfig.customTheme,
|
||
activeCode: state => state.activeCode
|
||
}),
|
||
chatId () {
|
||
let prefix = 'chart_'
|
||
if (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) {
|
||
prefix = 'preview_chart_'
|
||
}
|
||
|
||
if (this.$route.path === window?.BS_CONFIG?.routers?.designUrl) {
|
||
prefix = 'design_chart_'
|
||
}
|
||
|
||
if (this.$route.path === window?.BS_CONFIG?.routers?.pageListUrl) {
|
||
prefix = 'management_chart_'
|
||
}
|
||
return prefix + this.config.code
|
||
}
|
||
},
|
||
created () {
|
||
this.plotList = [...this.plotList, ...getCustomPlots()]
|
||
},
|
||
watch: {
|
||
// 监听主题变化手动触发组件配置更新
|
||
'config.option.theme': {
|
||
handler (val) {
|
||
if (val) {
|
||
this.changeStyle(this.config, true)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
},
|
||
beforeDestroy () {
|
||
if (this.chart) {
|
||
this.chart.destroy()
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations('bigScreen', ['changeChartConfig', 'changeActiveItemConfig', 'changeChartLoading']),
|
||
chartInit () {
|
||
let config = this.config
|
||
// key和code相等，说明是一进来刷新，调用list接口
|
||
if (this.config.code === this.config.key || this.isPreview) {
|
||
// 改变样式
|
||
config = this.changeStyle(config)
|
||
// 改变数据
|
||
config.loading = true
|
||
this.changeChartLoading(config)
|
||
this.changeDataByCode(config).then((res) => {
|
||
// 初始化图表
|
||
config.loading = false
|
||
this.changeChartLoading(config)
|
||
this.newChart(res)
|
||
}).catch(() => {
|
||
})
|
||
} else {
|
||
config.loading = true
|
||
this.changeChartLoading(config)
|
||
// 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
|
||
this.changeData(config).then((res) => {
|
||
config.loading = false
|
||
this.changeChartLoading(config)
|
||
// 初始化图表
|
||
this.newChart(res)
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 构造chart
|
||
*/
|
||
newChart (config) {
|
||
this.chart = new g2Plot[config.chartType](this.chatId, {
|
||
renderer: 'canvas',
|
||
// 仪表盘缩放状态下，点击准确
|
||
supportCSSTransform: true,
|
||
...config.option
|
||
})
|
||
this.chart.render()
|
||
this.registerEvent()
|
||
},
|
||
/**
|
||
* 注册事件
|
||
*/
|
||
registerEvent () {
|
||
// 图表添加事件进行数据联动
|
||
let formData = {}
|
||
// eslint-disable-next-line no-unused-vars
|
||
this.chart.on('tooltip:change', (...args) => {
|
||
formData = {}
|
||
formData = cloneDeep(args[0].data.items[0].data)
|
||
})
|
||
// eslint-disable-next-line no-unused-vars
|
||
this.chart.on('plot:click', (...args) => {
|
||
this.linkage(formData)
|
||
})
|
||
},
|
||
// 将config.setting的配置转化为option里的配置，这里之所以将转化的方法提出来，是因为在改变维度指标和样式的时候都需要转化
|
||
transformSettingToOption (config, type) {
|
||
let option = null
|
||
config.setting.forEach(set => {
|
||
if (set.optionField) {
|
||
// 例 point.style.fill
|
||
const optionField = set.optionField.split('.')
|
||
// 例 [point,style,fill]
|
||
option = config.option
|
||
optionField.forEach((field, index) => {
|
||
if (index === optionField.length - 1) {
|
||
// 数据配置时，必须有值才更新
|
||
if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
|
||
option[field] = set.value
|
||
}
|
||
} else {
|
||
// 如果没有这个属性，则创建该属性，并赋值为空对值
|
||
if (!option[field]) {
|
||
option[field] = {}
|
||
}
|
||
option = option[field]
|
||
}
|
||
})
|
||
}
|
||
})
|
||
return config
|
||
},
|
||
dataFormatting (config, data) {
|
||
// 数据返回成功则赋值
|
||
if (data.success) {
|
||
data = data.data || []
|
||
config = this.transformSettingToOption(config, 'data')
|
||
// 获取到后端返回的数据，有则赋值
|
||
const option = config.option
|
||
const setting = config.setting
|
||
if (config.dataHandler) {
|
||
try {
|
||
// 此处函数处理data
|
||
eval(config.dataHandler)
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
}
|
||
if (config.chartType == 'Treemap') {
|
||
const xAxis = config.setting.find(item => item.field === 'xField')?.value
|
||
const listData = data.children.map(item => {
|
||
if (xAxis && typeof item[xAxis] === 'number') {
|
||
item[xAxis] = (item[xAxis]).toString()
|
||
}
|
||
return item
|
||
})
|
||
config.option.data = { name: 'root', children: [...listData] }
|
||
} else {
|
||
// 如果维度为数字类型则转化为字符串，否则在不增加其他配置的情况下会导致图标最后一项不显示（g2plot官网已说明）
|
||
const xAxis = config.setting.find(item => item.field === 'xField')?.value
|
||
const yAxis = config.setting.find(item => item.field === 'yField')?.value
|
||
config.option.data = data?.map(item => {
|
||
if (config.chartType !== 'Bar' && xAxis && typeof item[xAxis] === 'number') {
|
||
item[xAxis] = (item[xAxis]).toString()
|
||
} else if (config.chartType === 'Bar' && yAxis && typeof item[yAxis] === 'number') {
|
||
item[yAxis] = (item[yAxis]).toString()
|
||
}
|
||
return item
|
||
})
|
||
}
|
||
} else {
|
||
// 数据返回失败则赋前端的模拟数据
|
||
config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data
|
||
const _xField = this.plotList?.find(plot => plot.name === config.name)?.option?.xField || config?.option?.xField
|
||
const _yField = this.plotList?.find(plot => plot.name === config.name)?.option?.yField || config?.option?.yField
|
||
const _seriesField = this.plotList?.find(plot => plot.name === config.name)?.option?.seriesField || config?.option?.seriesField
|
||
config.option = _seriesField ? { ...config.option, xField: _xField, yField: _yField, seriesField: _seriesField } : { ...config.option, xField: _xField, yField: _yField }
|
||
}
|
||
return config
|
||
},
|
||
// 组件的样式改变，返回改变后的config
|
||
changeStyle (config, isUpdateTheme) {
|
||
config = { ...this.config, ...config }
|
||
config = this.transformSettingToOption(config, 'custom')
|
||
// 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
|
||
const option = config.option
|
||
const setting = config.setting
|
||
if (this.config.optionHandler) {
|
||
try {
|
||
// 此处函数处理config
|
||
eval(this.config.optionHandler)
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
}
|
||
// 只有样式改变时更新主题配置，切换主题时不需要保存
|
||
if (!isUpdateTheme) {
|
||
config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
|
||
}
|
||
this.changeChartConfig(config)
|
||
if (config.code === this.activeCode) {
|
||
this.changeActiveItemConfig(config)
|
||
}
|
||
if (this.chart) {
|
||
this.chart.update(config.option)
|
||
}
|
||
return config
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../assets/style/echartStyle';
|
||
.light-theme{
|
||
background-color: #ffffff;
|
||
color: #000000;
|
||
}
|
||
.auto-theme{
|
||
background-color: transparent;
|
||
}
|
||
|
||
</style>
|