Skip to content

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

feat:charts axis formatter

parent f7f5fc62
Show whitespace changes
Inline Side-by-side
Showing with 209 additions and 250 deletions
components/BarMixMap/BarMixMap.vue
View file @ 0f267f5e
......@@ -71,8 +71,9 @@
let options = {
...this.elementInfo.option,
tooltip: {},
xAxis: this.$u.common.dealAxisFormatter(this.elementInfo.option.xAxis),
yAxis: {
...this.elementInfo.option.yAxis,
...this.$u.common.dealAxisFormatter(this.elementInfo.option.yAxis),
data: this.dealSeriesData(series).categories
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
......@@ -91,6 +92,13 @@
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
},
setMapOption() {
......
components/HorizontalBar/HorizontalBar.vue
View file @ 0f267f5e
......@@ -49,20 +49,14 @@ export default {
dataList: { categories, series }
} = this.elementData
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.elementInfo.option,
color: color,
xAxis: that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
yAxis: {
...that.elementInfo.option.yAxis,
...that.$u.common.dealAxisFormatter(that.elementInfo.option.yAxis),
data: categories
},
tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
dataZoom:
that.elementInfo.dataZoom && that.elementInfo.dataZoom.show
? [
......@@ -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) {
if (!data) return
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 = {
type: 'bar',
...that.elementInfo.option.bar,
...itemStyle,
label: {
...that.elementInfo.option.dataset,
formatter: val => {
......
components/LineMixBar/LineMixBar.vue
View file @ 0f267f5e
......@@ -48,29 +48,24 @@
canvas.setChart(chart)
const {categories, series} = this.elementData.dataList
const that = this
var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
'#f0ad54', '#ffffff', '#000000'
let yAxis = [
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' }),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' })
]
if (that.elementInfo.option.yAxis.showDouble) {
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' })
]
if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
color = that.elementInfo.option.colorConfig.value
}
that.ec.option = {
...that.elementInfo.option,
color: color,
xAxis: {
...that.elementInfo.option.xAxis,
data: categories
},
yAxis: [{
...that.elementInfo.option.yAxis,
type: 'value'
},
{
...that.elementInfo.option.yAxis,
type: 'value'
}
],
tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
yAxis: yAxis,
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: {
...that.elementInfo.option.toolbox,
feature: {
......@@ -110,6 +105,10 @@
if(this.labelShow) {
// 处理初始状态时，数值显示的数量是否超过了配置的最大值
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) {
count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
}
......@@ -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) {
if (!data) return
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 = {
label: {
...that.elementInfo.option.dataset,
......@@ -170,13 +166,15 @@
if (item.type === 'bar') {
config = {
...config,
...that.elementInfo.option.bar
...that.elementInfo.option.bar,
...itemStyle
}
} else if (item.type === 'line') {
config = {
yAxisIndex: 1,
...config,
...that.elementInfo.option.line
...that.elementInfo.option.line,
...itemStyle
}
}
return {
......
components/NormalBar/NormalBar.vue
View file @ 0f267f5e
......@@ -43,28 +43,21 @@
canvas.setChart(chart)
const { categories, series } = this.elementData.dataList
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
}
var yAxis = that.dealYAxis({...that.elementInfo.option.yAxis})
var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
if (yAxis.showDouble) {
yAxis = [
that.dealYAxis({ ...that.elementInfo.option.yAxis}),
that.dealYAxis({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second })
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis}),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second })
]
}
that.ec.option = {
...that.elementInfo.option,
color: color,
xAxis: {
...that.elementInfo.option.xAxis,
data: categories
},
yAxis: yAxis,
tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: {
...that.elementInfo.option.toolbox,
feature: {
......@@ -124,59 +117,27 @@
}
})
},
/**
*
* @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) {
if (!data) return
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 = {
type: 'bar',
...that.elementInfo.option.bar,
...itemStyle,
label: {
...that.elementInfo.option.dataset,
formatter: val => {
......
components/NormalLine/NormalLine.vue
View file @ 0f267f5e
......@@ -42,28 +42,21 @@
canvas.setChart(chart)
const { categories = [], series = [] } = this.elementData.dataList
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
}
var yAxis = that.dealYAxis({...that.elementInfo.option.yAxis})
var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
if (yAxis.showDouble) {
yAxis = [
that.dealYAxis({ ...that.elementInfo.option.yAxis}),
that.dealYAxis({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second})
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis}),
that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second})
]
}
that.ec.option = {
...that.elementInfo.option,
color: color,
xAxis: {
...that.elementInfo.option.xAxis,
data: categories
},
yAxis: yAxis,
tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: {
...that.elementInfo.option.toolbox,
feature: {
......@@ -123,49 +116,7 @@
}
})
},
/**
*
* @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
},
/**
* 处理数据
*/
......@@ -173,9 +124,18 @@
if (!data) return []
const that = this
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 = {
type: 'line',
...that.elementInfo.option.line,
...itemStyle,
label: {
...that.elementInfo.option.dataset,
formatter: val => {
......
pages/index/index.vue
View file @ 0f267f5e
......@@ -277,7 +277,7 @@
if (item.child.index.length) {
item.child.index.forEach(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) {
......
utils/common.js
View file @ 0f267f5e
......@@ -163,12 +163,12 @@ const install = (Vue, vm) => {
// ios会有零宽断言的兼容性问题，废弃掉正则判断，使用强制解析判断
const reg = '@diffOfNow('
if(paramStr.includes(reg)) {
if (paramStr.includes(reg)) {
const match = paramStr.split(reg)
if(match.length >= 2) {
if (match.length >= 2) {
const str = match[1]
const nums = str.split(')')
if(nums.length) {
if (nums.length) {
const res = reg + nums[0] + ')'
paramStr = paramStr.replace(res, diffOfNow(parseInt(nums[0])))
}
......@@ -193,7 +193,7 @@ const install = (Vue, vm) => {
let d1 = new Date();
let d2 = new Date();
d2.setMonth(0);
d2.setDate(3);//3 周一为本周第一天；2 周日为本周第一天；1 周六为本周第一天
d2.setDate(3); //3 周一为本周第一天；2 周日为本周第一天；1 周六为本周第一天
let rq = d1 - d2;
let days = Math.ceil(rq / (24 * 60 * 60 * 1000));
let weekly = Math.ceil(days / 7);
......@@ -233,6 +233,53 @@ const install = (Vue, vm) => {
}
/**
*
* @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 = {
converFunction,
fillDigit,
......@@ -242,7 +289,9 @@ const install = (Vue, vm) => {
rpxToPx,
chunk,
getQueryFromString,
filterRequestParams
filterRequestParams,
dealTooltip,
dealAxisFormatter
}
}
......
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