Skip to content

E
ec-report-refactor
Commit 130b70ef authored by leon's avatar leon
Browse files
Options

feat: charts support x y double axis

parent 6c97a118
Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 123 deletions
components/BarMixMap/BarMixMap.vue
View file @ 130b70ef
......@@ -71,11 +71,8 @@
let options = {
...this.elementInfo.option,
tooltip: {},
xAxis: this.$u.common.dealAxisFormatter(this.elementInfo.option.xAxis),
yAxis: {
...this.$u.common.dealAxisFormatter(this.elementInfo.option.yAxis),
data: this.dealSeriesData(series).categories
},
yAxis: that.$u.common.dealXAxis({...this.elementInfo.option.yAxis}, this.dealSeriesData(series)),
xAxis: that.$u.common.dealYAxis({...this.elementInfo.option.xAxis}),
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: {
id: 'associate',
......
components/HorizontalBar/HorizontalBar.vue
View file @ 130b70ef
......@@ -51,11 +51,8 @@ export default {
const that = this
that.ec.option = {
...that.elementInfo.option,
xAxis: that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
yAxis: {
...that.$u.common.dealAxisFormatter(that.elementInfo.option.yAxis),
data: categories
},
yAxis: that.$u.common.dealXAxis({...that.elementInfo.option.yAxis}, that.elementData.dataList),
xAxis: that.$u.common.dealYAxis({...that.elementInfo.option.xAxis}),
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
dataZoom:
that.elementInfo.dataZoom && that.elementInfo.dataZoom.show
......@@ -222,8 +219,8 @@ export default {
}
}
return {
...item,
...config
...config,
...item
}
})
return newData
......
components/LineMixBar/LineMixBar.vue
View file @ 130b70ef
......@@ -48,23 +48,10 @@
canvas.setChart(chart)
const {categories, series} = this.elementData.dataList
const that = this
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' })
]
}
that.ec.option = {
...that.elementInfo.option,
xAxis: {
...that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
data: categories
},
yAxis: yAxis,
xAxis: that.$u.common.dealXAxis({...that.elementInfo.option.xAxis}, that.elementData.dataList),
yAxis: that.$u.common.dealYAxis({...that.elementInfo.option.yAxis, type: 'value'}),
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: {
...that.elementInfo.option.toolbox,
......@@ -180,18 +167,14 @@
}
} else if (item.type === 'line') {
config = {
yAxisIndex: 1,
...config,
...that.elementInfo.option.line,
...itemStyle
}
}
return {
...item,
...config
}
})
return newData
return { ...config, ...item}
})
return that.$u.common.dealAxisIndex(newData, that.elementInfo)
},
/**
* 响应dataZoom的滑动事件
......
components/NormalBar/NormalBar.vue
View file @ 130b70ef
......@@ -43,20 +43,10 @@
canvas.setChart(chart)
const { categories, series } = this.elementData.dataList
const that = this
var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
if (yAxis.showDouble) {
yAxis = [
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,
xAxis: {
...that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
data: categories
},
yAxis: yAxis,
xAxis: that.$u.common.dealXAxis({...that.elementInfo.option.xAxis}, that.elementData.dataList),
yAxis: that.$u.common.dealYAxis({...that.elementInfo.option.yAxis}),
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: {
...that.elementInfo.option.toolbox,
......@@ -157,16 +147,9 @@
}
}
}
if (that.elementInfo.option.yAxis.showDouble) {
const yAxisIndex = data.length - 1 === index ? 1 : 0
return { ...item, ...config, yAxisIndex: yAxisIndex}
}
return {
...item,
...config
}
})
return newData
return { ...config, ...item}
})
return that.$u.common.dealAxisIndex(newData, that.elementInfo)
},
/**
* 响应dataZoom的滑动事件
......
components/NormalLine/NormalLine.vue
View file @ 130b70ef
......@@ -42,20 +42,10 @@
canvas.setChart(chart)
const { categories = [], series = [] } = this.elementData.dataList
const that = this
var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
if (yAxis.showDouble) {
yAxis = [
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,
xAxis: {
...that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
data: categories
},
yAxis: yAxis,
xAxis: that.$u.common.dealXAxis({...that.elementInfo.option.xAxis}, that.elementData.dataList),
yAxis: that.$u.common.dealYAxis({...that.elementInfo.option.yAxis}),
tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
toolbox: {
...that.elementInfo.option.toolbox,
......@@ -158,16 +148,9 @@
},
}
}
if (that.elementInfo.option.yAxis.showDouble) {
const yAxisIndex = data.length - 1 === index ? 1 : 0
return { ...item, ...config, yAxisIndex: yAxisIndex}
}
return {
...item,
...config
}
})
return newData
return { ...config, ...item}
})
return that.$u.common.dealAxisIndex(newData, that.elementInfo)
},
/**
* 响应dataZoom的滑动事件
......
utils/common.js
View file @ 130b70ef
......@@ -240,30 +240,33 @@ const install = (Vue, vm) => {
const dealTooltip = (tooltip) => {
if (!tooltip) {
return
}
tooltip = {
...tooltip,
position(point, params, dom, rect, size) {
let x = point[0];
let y = point[1];
const { contentSize, viewSize } = size;
const maxX = viewSize[0] - contentSize[0];
if (x > maxX) {
x -= contentSize[0];
}
const maxY = viewSize[1] - contentSize[1];
if (y > maxY) {
y -= contentSize[1];
}
if(y < 0) {
y = 0
}
return [x, y];
}
}
}
tooltip = {
...tooltip,
position(point, params, dom, rect, size) {
let x = point[0];
let y = point[1];
const {
contentSize,
viewSize
} = size;
const maxX = viewSize[0] - contentSize[0];
if (x > maxX) {
x -= contentSize[0];
}
const maxY = viewSize[1] - contentSize[1];
if (y > maxY) {
y -= contentSize[1];
}
if (y < 0) {
y = 0
}
return [x, y];
}
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
...tooltip,
formatter: (val) => {
return converFunction(tooltip.formatter, val)
},
......@@ -275,6 +278,69 @@ const install = (Vue, vm) => {
trigger: "axis"
}
}
/**
*
* @param axis 表单的yAxis设置
*/
const dealYAxis = (axis) => {
if (!axis) {
return
}
if (axis.showDouble) {
return [
dealAxisFormatter({
...axis
}),
dealAxisFormatter({
...axis,
...axis.second
})
]
}
return dealAxisFormatter({
...axis
})
}
/**
*
* @param axis 表单的xAxis设置
*/
const dealXAxis = (axis, dataList) => {
if (!axis) {
return
}
if (!dataList) {
return
}
const categories = dataList.categories
if (axis.showDouble) {
let data = categories
if (dataList.secondCategories) {
data = dataList.secondCategories
}
return [{
...dealAxisFormatter({
...axis
}),
data: categories
},
{
...dealAxisFormatter({
...axis,
...axis.second
}),
data: data
}
]
}
return {
...dealAxisFormatter({
...axis
}),
data: categories
}
}
/**
*
......@@ -296,27 +362,65 @@ const install = (Vue, vm) => {
}
}
return axis
}
/**
* 图层关系关联 子组件获取到folderId
* @param {elements}
*/
const elementFolderId = (elements) => {
elements.forEach(element => {
if (element.type === 'folder') {
element.child.data.forEach(item => {
const index = elements.findIndex(ele => ele.id === item)
if(index != -1) {
elements[index].folderId = element.id
elements[index].isChild = true
}
})
}
})
return elements
}
}
const dealAxisIndex = (datas, elementInfo) => {
const yShowDouble = elementInfo.option.yAxis.showDouble
let yflag = false
const xShowDouble = elementInfo.option.xAxis.showDouble
let xflag = false
const newData = datas.map((item, index) => {
let yAxisIndex = 0
if (yShowDouble) {
if (item.yAxisIndex) {
yAxisIndex = item.yAxisIndex
yflag = true
}
// 打开双轴的情况下,没有设置yAxisIndex的，默认数组最后的用右轴
if (datas.length > 1 && datas.length - 1 === index && !yflag) {
yAxisIndex = 1
}
}
let xAxisIndex = 0
if (xShowDouble) {
if (item.xAxisIndex) {
xAxisIndex = item.xAxisIndex
xflag = true
}
// 打开双轴的情况下,没有设置xAxisIndex的，默认数组最后的用顶轴
if (datas.length > 1 && datas.length - 1 === index && !xflag) {
xAxisIndex = 1
}
}
return {
...item,
yAxisIndex: yAxisIndex,
xAxisIndex: xAxisIndex
}
})
return newData
}
/**
* 图层关系关联 子组件获取到folderId
* @param {elements}
*/
const elementFolderId = (elements) => {
elements.forEach(element => {
if (element.type === 'folder') {
element.child.data.forEach(item => {
const index = elements.findIndex(ele => ele.id === item)
if (index != -1) {
elements[index].folderId = element.id
elements[index].isChild = true
}
})
}
})
return elements
}
vm.$u.common = {
converFunction,
......@@ -328,8 +432,10 @@ const install = (Vue, vm) => {
chunk,
getQueryFromString,
filterRequestParams,
dealTooltip,
dealAxisFormatter,
dealTooltip,
dealXAxis,
dealYAxis,
dealAxisIndex,
elementFolderId
}
}
......
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