Skip to content

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

feat: add custom charts

parent 982b7cd0
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 52 deletions
components/CustomChart/CustomChart.vue 0 → 100644
View file @ bff7eba4
<template>
<uni-ec-canvas class="uni-ec-canvas" id="custom-chart" ref="customChartCanvas" canvas-id="custom-chart"
:ec="ec"></uni-ec-canvas>
</template>
<script>
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import {
DATAZOOM_DEFAULT
} from '@/mixins/zoomConfig.js'
import {
svg
} from '@/mixins/svg.js'
import {
geoCoordMapList
} from '@/uni-ec-canvas/geoCoordMap.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
mixins: [echartElementData],
data() {
return {
ec: {
lazyLoad: true,
option: {}
},
timers: [],
currentIndex: -1
}
},
components: {
uniEcCanvas
},
created() {},
mounted() {
this.$refs['customChartCanvas'].init(this.inited)
},
methods: {
inited(canvas, width, height, canvasDpr) {
chart = this.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const {
dataList
} = this.elementData
const seniorConfig = this.elementInfo.option.seniorConfig
this.ec.option = this.$u.common.converFunction(seniorConfig, dataList, geoCoordMapList)
console.log(this.ec.option)
chart.setOption(this.ec.option)
const that = this
chart.on('click', event => {
that.handleEchartsClick(event)
})
// 处理自动动态排序
const sort = that.elementInfo.option.sort
if (sort.enable && that.ec.option) {
if (sort.autoSort) {
that.autoSort()
} else {
const toolbox = that.ec.option.toolbox ? that.ec.option.toolbox : {}
that.ec.option.toolbox = {
...toolbox,
itemSize: 20,
show: true,
feature: {
mySort: {
show: true,
title: '开始',
icon: svg.playIcon,
onclick: () => {
that.autoSort()
}
}
}
}
chart.setOption(that.ec.option)
}
}
return chart
},
autoSort() {
const toolbox = this.ec.option.toolbox
if (toolbox && toolbox.feature && toolbox.feature.mySort) {
if (toolbox.feature.mySort.icon === svg.playIcon) {
toolbox.feature.mySort.title = '暂停'
toolbox.feature.mySort.icon = svg.pauseIcon
} else {
toolbox.feature.mySort.title = '开始'
toolbox.feature.mySort.icon = svg.playIcon
this.timers.forEach(timer => {
clearTimeout(timer)
})
this.timers = []
return
}
}
const sort = this.elementInfo.option.sort
const timeInterval = sort.timeInterval || 2000
var dataList = this.elementData.dataList
if (sort.sortConfig) {
dataList = this.$u.common.converFunction(sort.sortConfig, this.elementData.dataList, {})
}
const startIndex = this.currentIndex
dataList.forEach((value, index) => {
if (index > startIndex) {
const timer = setTimeout(() => {
this.ec.option.series[0].data = value.data;
if (value.categories) {
this.ec.option.yAxis.data = value.categories
}
if (value.title && this.ec.option.graphic) {
this.ec.option.graphic.elements[0].style.text = value.title
}
this.currentIndex = index
if (index === dataList.length - 1) {
this.currentIndex = 0
toolbox.feature.mySort.title = '开始'
toolbox.feature.mySort.icon = svgIcon.playIcon
this.timers.forEach(timer => {
clearTimeout(timer)
})
this.timers = []
}
chart.setOption(this.ec.option)
}, timeInterval * (index - (startIndex === -1 ? 0 : startIndex + 1)))
this.timers.push(timer)
}
})
},
initChart() {
// 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => {
// 重新setOption，使得设置的formatter生效
// chart.setOption({
// series: dealSeries
// })
})
},
}
}
</script>
<style>
</style>
\ No newline at end of file
components/LineMixBar/LineMixBar.vue
View file @ bff7eba4
......@@ -11,8 +11,8 @@
<script>
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
......
components/NormalLine/NormalLine.vue
View file @ bff7eba4
......@@ -6,8 +6,8 @@
<script>
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
......
mixins/echartElementData.js
View file @ bff7eba4
......@@ -32,11 +32,13 @@ export default {
*/
async handleDynamicData (value) {
const that = this
let { dataUrl, dataMethod, dataFormatter, dataProcessing, dataConfig } = { ...value }
let { dataUrl, dataMethod, dataFormatter, dataProcessing, dataConfig, queryProcessing } = { ...value }
if (!dataUrl.length) {
return
}
if (queryProcessing) {
dataFormatter = that.$u.common.converFunction(queryProcessing, dataFormatter, value.queryFormatter)
}
if(value.queryFormatter) dataFormatter = {...dataFormatter, ...value.queryFormatter}
dataUrl = dataUrl.replace(/^(\/(dashboardCharts|dashboardAPI))?/, '')
dataFormatter = that.$u.common.filterRequestParams({...dataFormatter})
......
mixins/svg.js
View file @ bff7eba4
export const svg = {
enterFull: "M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z",
exitFull: "M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z"
exitFull: "M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z",
playIcon: 'M909.892465 331.781731c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092-53.21607-22.514491-109.809314-33.976414-168.142315-33.976414S397.176094 79.414751 343.857685 102.031581c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058c-22.514491 53.21607-33.976414 109.809314-33.976414 168.142315s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S932.509294 385.10014 909.892465 331.781731zM512 886.763942c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S725.273636 886.763942 512 886.763942zM641.355986 496.239856 458.681591 367.804917c-8.391765-5.8333-19.649011 0.102339-19.649011 10.336198l0 256.869878c0 10.23386 11.257246 16.169498 19.649011 10.336198l182.776734-128.434939C648.622027 511.897661 648.519688 501.254447 641.355986 496.239856z',
pauseIcon: 'M909.892465 331.781731c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092-53.21607-22.514491-109.809314-33.976414-168.142315-33.976414S397.176094 79.414751 343.857685 102.031581c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058c-22.514491 53.21607-33.976414 109.809314-33.976414 168.142315s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S932.509294 385.10014 909.892465 331.781731zM512 886.763942c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S725.273636 886.763942 512 886.763942zM440.055966 369.442335c-12.485309 0-22.514491 10.029182-22.514491 22.514491l0 248.68279c0 12.485309 10.029182 22.514491 22.514491 22.514491s22.514491-10.029182 22.514491-22.514491L462.570458 391.956826C462.570458 379.471517 452.541275 369.442335 440.055966 369.442335zM570.025984 369.442335c-12.485309 0-22.514491 10.029182-22.514491 22.514491l0 248.68279c0 12.485309 10.029182 22.514491 22.514491 22.514491s22.514491-10.029182 22.514491-22.514491L592.540476 391.956826C592.540476 379.471517 582.511293 369.442335 570.025984 369.442335z'
}
\ No newline at end of file
pages/details/details.vue
View file @ bff7eba4
......@@ -68,6 +68,8 @@
<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable>
<!-- <Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table> -->
<Folder v-if="element.type == 'folder'" :elementInfo="element"></Folder>
<!-- 自定义图表 -->
<CustomChart v-if="element.type == 'CustomChart'" :elementInfo="element"></CustomChart>
</view>
</template>
<ModelData
......
pages/index/index.vue
View file @ bff7eba4
......@@ -58,6 +58,8 @@
<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable>
<!-- <Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table> -->
<Folder v-if="element.type == 'folder'" :elementInfo="element"></Folder>
<!-- 自定义图表 -->
<CustomChart v-if="element.type == 'CustomChart'" :elementInfo="element"></CustomChart>
</view>
</template>
......
project.config.json
View file @ bff7eba4
......@@ -34,7 +34,7 @@
"minifyWXML": true
},
"compileType": "miniprogram",
"libVersion": "2.21.0",
"libVersion": "trial",
"appid": "wx06342b31eebe8da7",
"projectname": "ec-report-refactor",
"debugOptions": {
......
uni-ec-canvas/echarts.js
View file @ bff7eba4
This source diff could not be displayed because it is too large. You can view the blob instead.
uni-ec-canvas/wx-canvas.js
View file @ bff7eba4
......@@ -6,7 +6,8 @@ export default class WxCanvas {
this.isNew = isNew
if (isNew) {
this.canvasNode = canvasNode;
} else {
}
else {
this._initStyle(ctx);
}
......@@ -32,6 +33,10 @@ export default class WxCanvas {
this.chart = chart;
}
addEventListener() {
// noop
}
attachEvent() {
// noop
}
......@@ -52,23 +57,6 @@ export default class WxCanvas {
}
_initStyle(ctx) {
var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
];
styles.forEach(style => {
Object.defineProperty(ctx, style, {
set: value => {
if (style !== 'fillStyle' && style !== 'strokeStyle' ||
value !== 'none' && value !== null
) {
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
}
}
});
});
ctx.createRadialGradient = () => {
return ctx.createCircularGradient(arguments);
};
......@@ -89,13 +77,15 @@ export default class WxCanvas {
wxName: 'touchEnd',
ecName: 'click'
}];
eventNames.forEach(name => {
this.event[name.wxName] = e => {
const touch = e.touches[0];
this.chart.getZr().handler.dispatch(name.ecName, {
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {}
});
};
});
......@@ -118,4 +108,4 @@ export default class WxCanvas {
return this.canvasNode.height
return 0
}
}
}
\ 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