<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%"
|
/>
|
</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 { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
|
import _ from 'lodash'
|
import * as echarts from 'echarts'
|
import CloneDeep from 'lodash-es/cloneDeep'
|
|
export default {
|
name: 'EchartsCustomComponent',
|
mixins: [commonMixins, linkageMixins],
|
props: {
|
config: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
data () {
|
return {
|
chart: null,
|
hasData: false
|
}
|
},
|
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 () {
|
},
|
watch: {
|
// 监听主题变化手动触发组件配置更新
|
'config.option.theme': {
|
handler (val) {
|
if (val) {
|
this.changeStyle(this.config, true)
|
}
|
}
|
}
|
},
|
mounted () {
|
const dragSelect = document.querySelector('#' + this.chatId)
|
const resizeObserver = new ResizeObserver(entries => {
|
if (this.chart) {
|
this.chart.resize()
|
if(this.config.name.includes('3D')){
|
let config = this.observeChart(entries)
|
config = this.seriesStyle(config)
|
config.option && this.chart.setOption(config.option)
|
}
|
}
|
})
|
resizeObserver.observe(dragSelect)
|
},
|
beforeDestroy () {
|
if (this.chart) {
|
this.chart.dispose()
|
}
|
},
|
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) {
|
const chartDom = document.getElementById(this.chatId)
|
this.chart = echarts.init(chartDom)
|
config.option && this.chart.setOption(config.option)
|
},
|
/**
|
* 控制底部阴影大小
|
*/
|
observeChart (entries) {
|
const width = entries[0].contentRect.width
|
const height = entries[0].contentRect.height
|
const option = this.config.option
|
// 调整长方形的大小
|
option.graphic.children[0].shape.width = width * 0.9
|
// 调整多边形的大小
|
option.graphic.children[1].shape.points = [[width / 10, -height / 6], [width - width / 6, -height / 6], [width * 0.9, 0], [0, 0]]
|
return this.config
|
},
|
/**
|
* 注册事件
|
*/
|
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) {
|
const optionField = set.optionField.split('.')
|
option = config.option
|
// 判断是不是关于x轴的相关配置，x轴叠加了两层坐标轴，如果是x轴相关配置则作用于xAxis[0]
|
if (optionField[0] === 'xAxis') {
|
optionField.forEach((field, index) => {
|
if (index === 0) {
|
option = option.xAxis[0]
|
} else if (index === optionField.length - 1) {
|
// 数据配置时，必须有值才更新
|
if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
|
option[field] = set.value
|
}
|
} else {
|
option = option[field]
|
}
|
})
|
} else if (optionField[0] === 'series') {
|
let changeObject = []
|
let beforeChange = []
|
// 如果要配置数据标签相关信息
|
optionField.forEach((field, index) => {
|
if (index === 0) {
|
option = option[field]
|
} else if (index === 1) {
|
// 筛选出需要修改的series对象
|
changeObject = option.filter(item => item.id.includes(field))
|
beforeChange = [...changeObject]
|
option = option.filter(item => !(item.id.includes(field)))
|
} else if (index === optionField.length - 1) {
|
if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
|
changeObject.map(item => {
|
item[field] = set.value
|
})
|
}
|
} else {
|
const changeResult = []
|
changeObject.forEach(item => {
|
const result = { ...item[field] }
|
changeResult.push(result)
|
})
|
changeObject = [...changeResult]
|
}
|
})
|
// 合并修改后的series对象
|
changeObject.forEach(
|
(item, index) => {
|
beforeChange[index].label = _.cloneDeep(item)
|
option.push(beforeChange[index])
|
}
|
)
|
} else if (optionField[0] === 'graphic') {
|
// 配置底部阴影颜色
|
option.graphic.children.forEach(item => {
|
item.style.fill = set.value
|
})
|
} else {
|
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 {
|
option = option[field]
|
}
|
})
|
}
|
}
|
})
|
return config
|
},
|
dataFormatting (config, data) {
|
// config = this.config
|
// 数据返回成功则赋值
|
if (data.success) {
|
data = data.data
|
// 获取到后端返回的数据，有则赋值
|
const option = config.option
|
const setting = config.setting
|
if (config.dataHandler) {
|
try {
|
// 此处函数处理data
|
eval(config.dataHandler)
|
} catch (e) {
|
console.error(e)
|
}
|
}
|
config.option = this.echartsOptionFormatting(config, data)
|
config = this.transformSettingToOption(config, 'data')
|
} else {
|
// 数据返回失败则赋前端的模拟数据
|
// config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data
|
}
|
config = this.seriesStyle(config)
|
return config
|
},
|
getxDataAndYData (xField, yField, data) {
|
let xData = []
|
let yData = []
|
|
// 获取所有x轴的分类
|
data.forEach(item => {
|
xData.push(item[xField])
|
})
|
xData = [...new Set(xData)]
|
xData.forEach(x => {
|
let max = 0
|
data.forEach(item => {
|
if (item[xField] === x) {
|
max = item[yField] > max ? item[yField] : max
|
}
|
})
|
yData.push(max)
|
})
|
return { xData, yData }
|
},
|
// 格式化echarts的配置
|
echartsOptionFormatting (config, data) {
|
const option = config.option
|
// 分组字段
|
const xField = config.setting.find(item => item.optionField === 'xField')?.value
|
const yField = config.setting.find(item => item.optionField === 'yField')?.value
|
// 判断是否存在分组
|
const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
|
const { xData, yData } = this.getxDataAndYData(xField, yField, data)
|
const maxY = Math.max(...yData) + Math.max(...yData) * 0.2
|
// 生成阴影柱子的值
|
const shadowData = Array.from({ length: xData.length }, () => maxY)
|
option.xAxis = option.xAxis.map(item => {
|
return {
|
...item,
|
data: xData
|
}
|
})
|
// 存在分组字段
|
if (hasSeries) {
|
const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
|
const seriesFieldList = [...new Set(data.map(item => item[seriesField]))]
|
option.series = []
|
const barWidth = option.seriesCustom.barWidth
|
// 获取数据标签展示情况
|
let labelShow = 0
|
let labelPosition = 'inside'
|
let labelColor = '#fff'
|
let labelSize = 12
|
config.setting.forEach(set => {
|
if (set.field === 'series_barColor_label_show') {
|
labelShow = set.value
|
} else if (set.field === 'series_barColor_label_position') {
|
labelPosition = set.value
|
} else if (set.field === 'series_barColor_label_color') {
|
labelColor = set.value
|
} else if (set.field === 'series_barColor_label_fontSize') {
|
labelSize = set.value
|
}
|
})
|
// 偏移量数组
|
const offsetArr = []
|
let index = 0
|
if (seriesFieldList.length % 2 === 0) {
|
const length = seriesFieldList.length / 2
|
for (let i = 0; i < length; i++) {
|
const offsetX = (parseInt('10%') + parseInt('50%')) * (2 * i + 1)
|
offsetArr.push(offsetX)
|
offsetArr.unshift(-offsetX)
|
}
|
} else {
|
const length = Math.ceil(seriesFieldList.length / 2)
|
for (let i = 0; i < length; i++) {
|
if (i === 0) {
|
offsetArr.push(0)
|
} else {
|
const offsetX = (parseInt('20%') + parseInt('100%')) * i
|
offsetArr.push(offsetX)
|
offsetArr.unshift(-offsetX)
|
}
|
}
|
}
|
for (const seriesFieldItem of seriesFieldList) {
|
const seriesData = (data.filter(item => item[seriesField] === seriesFieldItem))?.map(item => item[yField])
|
const seriesItem = [
|
{
|
id: 'barTopColor' + seriesFieldItem,
|
type: 'pictorialBar',
|
tooltip: { show: false },
|
symbol: 'diamond',
|
symbolSize: [barWidth, barWidth / 2],
|
symbolOffset: [offsetArr[index] + '%', -barWidth / 4],
|
symbolPosition: 'end',
|
z: 15,
|
zlevel: 2,
|
color: '#ffff33',
|
data: seriesData
|
},
|
{
|
id: 'barColor' + seriesFieldItem,
|
type: 'bar',
|
barGap: '20%',
|
barWidth: barWidth,
|
color: '#115ba6',
|
label: {
|
fontStyle: 'normal',
|
show: labelShow,
|
position: labelPosition,
|
color: labelColor,
|
fontSize: labelSize
|
},
|
zlevel: 2,
|
z: 12,
|
data: seriesData
|
},
|
{
|
id: 'barBottomColor' + seriesFieldItem,
|
type: 'pictorialBar',
|
tooltip: { show: false },
|
symbol: 'diamond',
|
symbolSize: [barWidth, barWidth / 2],
|
symbolOffset: [offsetArr[index] + '%', barWidth / 4],
|
zlevel: 2,
|
z: 15,
|
color: 'rgb(2, 192, 255)',
|
data: seriesData
|
},
|
{
|
id: 'shadowColor' + seriesFieldItem,
|
type: 'bar',
|
tooltip: { show: false },
|
xAxisIndex: 1,
|
barGap: '20%',
|
data: shadowData,
|
zlevel: 1,
|
barWidth: barWidth,
|
color: 'rgba(9, 44, 76,.8)'
|
},
|
{
|
id: 'shadowTopColor' + seriesFieldItem,
|
type: 'pictorialBar',
|
tooltip: { show: false },
|
symbol: 'diamond',
|
symbolSize: [barWidth, barWidth / 2],
|
symbolOffset: [offsetArr[index] + '%', -barWidth / 4],
|
symbolPosition: 'end',
|
z: 15,
|
color: 'rgb(15, 69, 133)',
|
zlevel: 1,
|
data: shadowData
|
}
|
]
|
index++
|
option.series.push(...seriesItem)
|
}
|
} else {
|
// 没有分组，不需要修改配置，直接修改series中每个对象的series
|
option.series.forEach(item => {
|
if (item.id.includes('shadow')) {
|
item.data = shadowData
|
} else {
|
item.data = yData
|
}
|
})
|
}
|
return option
|
},
|
// 对series里面的样式进行配置
|
seriesStyle (config) {
|
if(!config.name.includes('3D')){
|
return config
|
}
|
const _config = CloneDeep(config)
|
const seriesCustom = _config.option.seriesCustom
|
const ids = Object.keys(config.option.seriesCustom)
|
// 判断是否是分组柱状图
|
const isGroup = _config.option.series.length !== 5
|
// 宽度配置
|
_config.option.series.forEach(item => {
|
if (item.type === 'pictorialBar') {
|
item.symbolSize = [seriesCustom.barWidth, seriesCustom.barWidth / 2]
|
} else if (item.type === 'bar') {
|
item.barWidth = seriesCustom.barWidth
|
}
|
})
|
// 如果是基础柱状图
|
if (!isGroup) {
|
_config.option.series.forEach(item => {
|
// 配置颜色
|
if (ids.includes(item.id)) {
|
item.color = seriesCustom[item.id]
|
}
|
})
|
} else {
|
// 如果是分组柱状图
|
ids.forEach(id => {
|
if (id !== 'barWidth') {
|
let index = 0
|
_config.option.series.forEach(item => {
|
if (item.id.includes(id)) {
|
item.color = _config.option.seriesCustom[id][index]
|
index++
|
}
|
})
|
}
|
})
|
}
|
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)
|
}
|
}
|
// 此时，setting中的部分变量映射到了option.seriesCustom中，但未映射到series的具体配置中
|
config = this.seriesStyle(config)
|
// 只有样式改变时更新主题配置，切换主题时不需要保存
|
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.setOption(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>
|
