Skip to content

E
ec-report-refactor
Commit 0f267f5e authored by leon's avatar leon
Browse files
Options

feat:charts axis formatter

parent f7f5fc62
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 250 deletions
components/BarMixMap/BarMixMap.vue
View file @ 0f267f5e
...@@ -71,9 +71,10 @@ ...@@ -71,9 +71,10 @@
let options = { let options = {
...this.elementInfo.option, ...this.elementInfo.option,
tooltip: {}, tooltip: {},
xAxis: this.$u.common.dealAxisFormatter(this.elementInfo.option.xAxis),
yAxis: { yAxis: {
...this.elementInfo.option.yAxis, ...this.$u.common.dealAxisFormatter(this.elementInfo.option.yAxis),
data: this.dealSeriesData(series).categories data: this.dealSeriesData(series).categories
}, },
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}], dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: { series: {
...@@ -91,6 +92,13 @@ ...@@ -91,6 +92,13 @@
data: this.dealSeriesData(series).series data: this.dealSeriesData(series).series
} }
} }
// 如果设置了颜色配置，使用颜色配置
if (this.elementInfo.option.colorConfig && this.elementInfo.option.colorConfig.value) {
return {
options,
color: this.elementInfo.option.colorConfig.value
}
}
return options return options
}, },
setMapOption() { setMapOption() {
......
components/HorizontalBar/HorizontalBar.vue
View file @ 0f267f5e
...@@ -49,20 +49,14 @@ export default { ...@@ -49,20 +49,14 @@ export default {
dataList: { categories, series } dataList: { categories, series }
} = this.elementData } = this.elementData
const that = this const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
'#f0ad54', '#ffffff', '#000000'
]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
color = that.elementInfo.option.colorConfig.value
}
that.ec.option = { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
color: color, xAxis: that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
yAxis: { yAxis: {
...that.elementInfo.option.yAxis, ...that.$u.common.dealAxisFormatter(that.elementInfo.option.yAxis),
data: categories data: categories
}, },
tooltip: that.dealTooltip(that.elementInfo.option.tooltip), tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
dataZoom: dataZoom:
that.elementInfo.dataZoom && that.elementInfo.dataZoom.show that.elementInfo.dataZoom && that.elementInfo.dataZoom.show
? [ ? [
...@@ -189,38 +183,27 @@ export default { ...@@ -189,38 +183,27 @@ export default {
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: val => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: 'axis'
}
}
return {
...tooltip,
trigger: 'axis'
}
},
/** /**
* 处理数据 * 处理数据
*/ */
dealSeriesData(data) { dealSeriesData(data) {
if (!data) return if (!data) return
const that = this const that = this
const newData = data.map(item => { const newData = data.map((item, index) => {
const config = { // 如果设置了颜色配置，使用颜色配置
let itemStyle = {...that.elementInfo.option.bar.itemStyle}
if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
const colors = that.elementInfo.option.colorConfig.value
itemStyle = {
...that.elementInfo.option.bar.itemStyle,
color: colors[index % colors.length]
}
}
const config = {
type: 'bar', type: 'bar',
...that.elementInfo.option.bar, ...that.elementInfo.option.bar,
...itemStyle,
label: { label: {
...that.elementInfo.option.dataset, ...that.elementInfo.option.dataset,
formatter: val => { formatter: val => {
......
components/LineMixBar/LineMixBar.vue
View file @ 0f267f5e
...@@ -48,29 +48,24 @@ ...@@ -48,29 +48,24 @@
canvas.setChart(chart) canvas.setChart(chart)
const {categories, series} = this.elementData.dataList const {categories, series} = this.elementData.dataList
const that = this const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff', let yAxis = [
'#f0ad54', '#ffffff', '#000000' that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' }),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' })
] ]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) { if (that.elementInfo.option.yAxis.showDouble) {
color = that.elementInfo.option.colorConfig.value yAxis = [
} that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' }),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second, type: 'value' })
]
}
that.ec.option = { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
color: color,
xAxis: { xAxis: {
...that.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
yAxis: [{ yAxis: yAxis,
...that.elementInfo.option.yAxis, tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
type: 'value'
},
{
...that.elementInfo.option.yAxis,
type: 'value'
}
],
tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -110,6 +105,10 @@ ...@@ -110,6 +105,10 @@
if(this.labelShow) { if(this.labelShow) {
// 处理初始状态时，数值显示的数量是否超过了配置的最大值 // 处理初始状态时，数值显示的数量是否超过了配置的最大值
let count = categories.length let count = categories.length
if(count < this.elementInfo.option.dataset.maxCount) {
this.elementInfo.dataZoom.start = 0
this.elementInfo.dataZoom.end = 100
}
if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) { if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100 count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
} }
...@@ -130,35 +129,32 @@ ...@@ -130,35 +129,32 @@
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/** /**
* 处理数据 * 处理数据
*/ */
dealSeriesData(data) { dealSeriesData(data) {
if (!data) return if (!data) return
const that = this const that = this
const newData = data.map(item => { const newData = data.map((item, index) => {
// 如果设置了颜色配置，使用颜色配置
let itemStyle = {...that.elementInfo.option.bar.itemStyle}
if (item.type === 'line') {
itemStyle = {...that.elementInfo.option.line.itemStyle}
}
if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
const colors = that.elementInfo.option.colorConfig.value
itemStyle = {
...that.elementInfo.option.bar.itemStyle,
color: colors[index % colors.length]
}
if (item.type === 'line') {
itemStyle = {
...that.elementInfo.option.line.itemStyle,
color: colors[index % colors.length]
}
}
}
let config = { let config = {
label: { label: {
...that.elementInfo.option.dataset, ...that.elementInfo.option.dataset,
...@@ -170,13 +166,15 @@ ...@@ -170,13 +166,15 @@
if (item.type === 'bar') { if (item.type === 'bar') {
config = { config = {
...config, ...config,
...that.elementInfo.option.bar ...that.elementInfo.option.bar,
...itemStyle
} }
} else if (item.type === 'line') { } else if (item.type === 'line') {
config = { config = {
yAxisIndex: 1, yAxisIndex: 1,
...config, ...config,
...that.elementInfo.option.line ...that.elementInfo.option.line,
...itemStyle
} }
} }
return { return {
......
components/NormalBar/NormalBar.vue
View file @ 0f267f5e
...@@ -42,29 +42,22 @@ ...@@ -42,29 +42,22 @@
}) })
canvas.setChart(chart) canvas.setChart(chart)
const { categories, series } = this.elementData.dataList const { categories, series } = this.elementData.dataList
const that = this const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff', var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
'#f0ad54', '#ffffff', '#000000'
]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
color = that.elementInfo.option.colorConfig.value
}
var yAxis = that.dealYAxis({...that.elementInfo.option.yAxis})
if (yAxis.showDouble) { if (yAxis.showDouble) {
yAxis = [ yAxis = [
that.dealYAxis({ ...that.elementInfo.option.yAxis}), that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis}),
that.dealYAxis({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second }) that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second })
] ]
} }
that.ec.option = { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
color: color,
xAxis: { xAxis: {
...that.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
yAxis: yAxis, yAxis: yAxis,
tooltip: that.dealTooltip(that.elementInfo.option.tooltip), tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -123,60 +116,28 @@ ...@@ -123,60 +116,28 @@
chart.setOption(option) chart.setOption(option)
} }
}) })
},
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
}, },
/**
*
* @param yAxis 表单的yAxis设置
*/
dealYAxis(yAxis) {
if (!yAxis) {
return
}
if (yAxis.axisLabel.formatter && yAxis.axisLabel.formatter.length) {
return {
...yAxis,
axisLabel: {
...yAxis.axisLabel,
formatter: (val) => {
return this.$u.common.converFunction(yAxis.axisLabel.formatter, val)
},
}
}
}
return yAxis
},
/** /**
* 处理数据 * 处理数据
*/ */
dealSeriesData(data) { dealSeriesData(data) {
if (!data) return if (!data) return
const that = this const that = this
const newData = data.map(item => { const newData = data.map((item, index) => {
// 如果设置了颜色配置，使用颜色配置
let itemStyle = {...that.elementInfo.option.bar.itemStyle}
if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
const colors = that.elementInfo.option.colorConfig.value
itemStyle = {
...that.elementInfo.option.bar.itemStyle,
color: colors[index % colors.length]
}
}
const config = { const config = {
type: 'bar', type: 'bar',
...that.elementInfo.option.bar, ...that.elementInfo.option.bar,
...itemStyle,
label: { label: {
...that.elementInfo.option.dataset, ...that.elementInfo.option.dataset,
formatter: val => { formatter: val => {
......
components/NormalLine/NormalLine.vue
View file @ 0f267f5e
...@@ -42,28 +42,21 @@ ...@@ -42,28 +42,21 @@
canvas.setChart(chart) canvas.setChart(chart)
const { categories = [], series = [] } = this.elementData.dataList const { categories = [], series = [] } = this.elementData.dataList
const that = this const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff', var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
'#f0ad54', '#ffffff', '#000000'
]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
color = that.elementInfo.option.colorConfig.value
}
var yAxis = that.dealYAxis({...that.elementInfo.option.yAxis})
if (yAxis.showDouble) { if (yAxis.showDouble) {
yAxis = [ yAxis = [
that.dealYAxis({ ...that.elementInfo.option.yAxis}), that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis}),
that.dealYAxis({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second}) that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second})
] ]
} }
that.ec.option = { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
color: color,
xAxis: { xAxis: {
...that.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
yAxis: yAxis, yAxis: yAxis,
tooltip: that.dealTooltip(that.elementInfo.option.tooltip), tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -123,59 +116,26 @@ ...@@ -123,59 +116,26 @@
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/**
*
* @param yAxis 表单的yAxis设置
*/
dealYAxis(yAxis) {
if (!yAxis) {
return
}
if (yAxis.axisLabel.formatter && yAxis.axisLabel.formatter.length) {
return {
...yAxis,
axisLabel: {
...yAxis.axisLabel,
formatter: (val) => {
return this.$u.common.converFunction(yAxis.axisLabel.formatter, val)
},
}
}
}
return yAxis
},
/** /**
* 处理数据 * 处理数据
*/ */
dealSeriesData(data) { dealSeriesData(data) {
if (!data) return [] if (!data) return []
const that = this const that = this
const newData = data.map((item, index) => { const newData = data.map((item, index) => {
let itemStyle = {...that.elementInfo.option.line.itemStyle}
if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
const colors = that.elementInfo.option.colorConfig.value
itemStyle = {
...that.elementInfo.option.line.itemStyle,
color: colors[index % colors.length]
}
}
const config = { const config = {
type: 'line', type: 'line',
...that.elementInfo.option.line, ...that.elementInfo.option.line,
...itemStyle,
label: { label: {
...that.elementInfo.option.dataset, ...that.elementInfo.option.dataset,
formatter: val => { formatter: val => {
......
pages/index/index.vue
View file @ 0f267f5e
...@@ -277,7 +277,7 @@ ...@@ -277,7 +277,7 @@
if (item.child.index.length) { if (item.child.index.length) {
item.child.index.forEach(child => { item.child.index.forEach(child => {
const index = data.list.findIndex(i => i.id === child ) const index = data.list.findIndex(i => i.id === child )
data.list[index].linkTabsId = item.id data.list[index].linkTabsId = item
}) })
} }
if (item.child.data.length) { if (item.child.data.length) {
......
utils/common.js
View file @ 0f267f5e
...@@ -6,7 +6,7 @@ const install = (Vue, vm) => { ...@@ -6,7 +6,7 @@ const install = (Vue, vm) => {
/** /**
* 数据转换 * 数据转换
*/ */
const converFunction = (func, data, filter = {}) => { const converFunction = (func, data, filter = {}) => {
if (!func) return if (!func) return
return new Function('"use strict";return (' + func + ')')()(data, filter); return new Function('"use strict";return (' + func + ')')()(data, filter);
} }
...@@ -142,37 +142,37 @@ const install = (Vue, vm) => { ...@@ -142,37 +142,37 @@ const install = (Vue, vm) => {
} }
if (paramStr.includes('@yesterday')) { if (paramStr.includes('@yesterday')) {
paramStr = paramStr.replace(/@yesterday/g, yesterday()) paramStr = paramStr.replace(/@yesterday/g, yesterday())
} }
// 匹配以@开头，空格 或者 " 结尾的的字符串 // 匹配以@开头，空格 或者 " 结尾的的字符串
// const pattern = /((@).*?(\s))|((@).*?("))/g // const pattern = /((@).*?(\s))|((@).*?("))/g
// const match = paramStr.matchAll(pattern) // const match = paramStr.matchAll(pattern)
// if (match?.length) { // if (match?.length) {
// match.forEach((item) => { // match.forEach((item) => {
// if (item.includes('diffOfNow')) { // if (item.includes('diffOfNow')) {
// // 取出()里面的内容 // // 取出()里面的内容
// const regex = /(\()\S+(\))/g // const regex = /(\()\S+(\))/g
// const value = item.matchAll(regex) // const value = item.matchAll(regex)
// if (value?.length) { // if (value?.length) {
// diffOfNow(parseInt(value[0])) // diffOfNow(parseInt(value[0]))
// const str = '@' + item // const str = '@' + item
// paramStr = paramStr.replace(str, diffOfNow(parseInt(value[0]))) // paramStr = paramStr.replace(str, diffOfNow(parseInt(value[0])))
// } // }
// } // }
// }) // })
// } // }
// ios会有零宽断言的兼容性问题，废弃掉正则判断，使用强制解析判断 // ios会有零宽断言的兼容性问题，废弃掉正则判断，使用强制解析判断
const reg = '@diffOfNow(' const reg = '@diffOfNow('
if(paramStr.includes(reg)) { if (paramStr.includes(reg)) {
const match = paramStr.split(reg) const match = paramStr.split(reg)
if(match.length >= 2) { if (match.length >= 2) {
const str = match[1] const str = match[1]
const nums = str.split(')') const nums = str.split(')')
if(nums.length) { if (nums.length) {
const res = reg + nums[0] + ')' const res = reg + nums[0] + ')'
paramStr = paramStr.replace(res, diffOfNow(parseInt(nums[0]))) paramStr = paramStr.replace(res, diffOfNow(parseInt(nums[0])))
} }
} }
} }
return JSON.parse(paramStr) return JSON.parse(paramStr)
} }
...@@ -188,15 +188,15 @@ const install = (Vue, vm) => { ...@@ -188,15 +188,15 @@ const install = (Vue, vm) => {
const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
return month return month
} }
const weekly = () => { const weekly = () => {
let d1 = new Date(); let d1 = new Date();
let d2 = new Date(); let d2 = new Date();
d2.setMonth(0); d2.setMonth(0);
d2.setDate(3);//3 周一为本周第一天；2 周日为本周第一天；1 周六为本周第一天 d2.setDate(3); //3 周一为本周第一天；2 周日为本周第一天；1 周六为本周第一天
let rq = d1 - d2; let rq = d1 - d2;
let days = Math.ceil(rq / (24 * 60 * 60 * 1000)); let days = Math.ceil(rq / (24 * 60 * 60 * 1000));
let weekly = Math.ceil(days / 7); let weekly = Math.ceil(days / 7);
return weekly + 1; return weekly + 1;
} }
...@@ -216,23 +216,70 @@ const install = (Vue, vm) => { ...@@ -216,23 +216,70 @@ const install = (Vue, vm) => {
return year + "-" + month + "-" + day; return year + "-" + month + "-" + day;
} }
const yesterday = () => { const yesterday = () => {
return diffOfNow(-1) return diffOfNow(-1)
} }
const diffOfNow = (diff) => { const diffOfNow = (diff) => {
const date = new Date() const date = new Date()
const timestamp = date.getTime() + diff * 1000 * 24 * 60 * 60 const timestamp = date.getTime() + diff * 1000 * 24 * 60 * 60
date.setTime(timestamp) date.setTime(timestamp)
const year = date.getFullYear(); const year = date.getFullYear();
// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05 // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
// 拼接 // 拼接
return year + "-" + month + "-" + day; return year + "-" + month + "-" + day;
} }
/**
*
* @param tooltip 表单的tooltip设置
*/
const dealTooltip = (tooltip) => {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
}
/**
*
* @param yAxis 表单的yAxis设置
*/
const dealAxisFormatter = (axis) => {
if (!axis) {
return
}
if (axis.axisLabel.formatter && axis.axisLabel.formatter.length) {
return {
...axis,
axisLabel: {
...axis.axisLabel,
formatter: (val) => {
return converFunction(axis.axisLabel.formatter, val)
},
}
}
}
return axis
}
vm.$u.common = { vm.$u.common = {
converFunction, converFunction,
fillDigit, fillDigit,
...@@ -241,11 +288,13 @@ const install = (Vue, vm) => { ...@@ -241,11 +288,13 @@ const install = (Vue, vm) => {
pxToRpx, pxToRpx,
rpxToPx, rpxToPx,
chunk, chunk,
getQueryFromString, getQueryFromString,
filterRequestParams filterRequestParams,
dealTooltip,
dealAxisFormatter
} }
} }
export default { export default {
install install
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment