{"remainingRequest":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\xq-web-fvue\\src\\components\\form\\chart\\EipChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\src\\components\\form\\chart\\EipChart.vue","mtime":1667327529512},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport echarts from \"echarts\";\r\nimport ecStat from \"echarts-stat\";\r\nimport form from \"@/api/form.js\";\r\nexport default {\r\n props: {\r\n id: {\r\n type: String,\r\n required: true\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(() => {\r\n this.initData();\r\n });\r\n },\r\n watch: {\r\n id: function(newV) {\r\n if (newV) {\r\n this.customChart = [];\r\n this.data = [];\r\n this.quickSearchProp = \"\";\r\n this.defaultQuery = [];\r\n this.showTable = false;\r\n this.initData();\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n showTable: false,\r\n customChart: {},\r\n pageResult: {\r\n page: 1,\r\n pageSize: 20,\r\n total: 0\r\n },\r\n data: [],\r\n quickSearchProp: \"\",\r\n defaultQuery: [],\r\n queryOpTransObj: {\r\n EQ: \"EQUAL\",\r\n BETWEEN: \"BETWEEN\",\r\n GE: \"GREAT_EQUAL\",\r\n LE: \"LESS_EQUAL\",\r\n LK: \"LIKE\",\r\n IN: \"IN\"\r\n }\r\n };\r\n },\r\n methods: {\r\n loadData(param, cb) {\r\n if (this.customChart.alias) {\r\n param.pageBean.pageSize = parseInt(\r\n (this.customChart.conf.maxLength && this.customChart.conf.maxLength != '0') ? this.customChart.conf.maxLength : 20\r\n );\r\n form\r\n .getListData(this.customChart.alias, param)\r\n .then(response => {\r\n this.data = response.rows;\r\n this.pageResult = {\r\n page: response.page,\r\n pageSize: response.pageSize,\r\n total: response.total\r\n };\r\n this.customChart.rows = this.data;\r\n this.buildChart(this.customChart);\r\n })\r\n .finally(() => {\r\n cb();\r\n });\r\n } else {\r\n cb();\r\n }\r\n },\r\n async initData() {\r\n let data = await form.getCustomChartById(this.id);\r\n if(data){\r\n data.conditionfield = JSON.parse(data.conditionfield);\r\n data.displayfield = JSON.parse(data.displayfield);\r\n data.xaxisField = JSON.parse(data.xaxisField);\r\n data.sortfield = JSON.parse(data.sortfield);\r\n data.conf = JSON.parse(data.conf);\r\n this.customChart = data;\r\n this.initCondition();\r\n this.showTable = true;\r\n }\r\n },\r\n initCondition() {\r\n let conditions = this.customChart.conditionfield;\r\n for (let i = 0; i < conditions.length; i++) {\r\n if (conditions[i].defaultType === \"1\") {\r\n this.quickSearchProp += conditions[i].field.toUpperCase() + \",\";\r\n } else {\r\n this.defaultQuery.push({\r\n property: conditions[i].field,\r\n value: conditions[i].defaultValue,\r\n operation: this.queryOpTransObj[conditions[i].condition],\r\n group: \"main\"\r\n });\r\n }\r\n }\r\n },\r\n buildChart(data) {\r\n let myChart = echarts.init(document.getElementById(this.id), \"default\");\r\n let grid = this.getGrid();\r\n data.conf.title.text = data.name;\r\n data.conf.title.top = this.getTitlePosition();\r\n let option = {\r\n title: data.conf.title,\r\n tooltip: {},\r\n toolbox: { feature: { saveAsImage: {} } },\r\n legend: {},\r\n grid: grid,\r\n series: {}\r\n };\r\n switch (data.style) {\r\n case 1:\r\n option = this.buildLine(data, option);\r\n break;\r\n case 3:\r\n option = this.buildPie(data, option);\r\n break;\r\n case 4:\r\n option = this.buildRadar(data, option);\r\n break;\r\n case 5:\r\n option = this.buildFunnel(data, option);\r\n break;\r\n case 6:\r\n option = this.buildScatter(data, option);\r\n break;\r\n case 7:\r\n option = this.buildHeatmap(data, option);\r\n break;\r\n default:\r\n break;\r\n }\r\n this.adjustChatTitle(data, option);\r\n myChart.setOption(option);\r\n },\r\n buildLine(data, option) {\r\n let displayField = this.customChart.displayfield;\r\n let legendData = [];\r\n let xAxisData = [];\r\n let seriesData = [];\r\n let xAxisField = {};\r\n let series = this.customChart.conf.series;\r\n if (this.customChart.xaxisField)\r\n xAxisField = this.customChart.xaxisField[0];\r\n\r\n for (let i = 0, d; (d = displayField[i++]); ) {\r\n if (d) {\r\n let arr = [];\r\n let type = d.type;\r\n legendData.push(d.comment);\r\n for (let j = 0, res; (res = data.rows[j++]); ) {\r\n if (i === 1) {\r\n let value = res[xAxisField.field.toUpperCase()];\r\n if (\r\n xAxisField.dbType === \"date\" &&\r\n value &&\r\n typeof value === \"number\"\r\n )\r\n value = new Date(value).format(defaultFmt);\r\n xAxisData.push(value);\r\n }\r\n if (res) {\r\n let value = res[d.field.toUpperCase()];\r\n arr.push(value);\r\n }\r\n }\r\n let se = {\r\n name: d.comment,\r\n type: d.type,\r\n data: arr,\r\n stack: series.stack ? \"one\" : null\r\n };\r\n if (!series.doubleYAxis) {\r\n se.yAxisIndex = d.yAxis === 1 ? 0 : 1;\r\n }\r\n if (type === \"line\") {\r\n se.smooth = series.smooth;\r\n }\r\n seriesData.push(se);\r\n }\r\n }\r\n option.series = seriesData;\r\n option.tooltip = {\r\n trigger: \"axis\"\r\n };\r\n option.legend.y = 50;\r\n // option.grid = {\r\n // left: \"3%\",\r\n // right: \"4%\",\r\n // bottom: \"3%\",\r\n // containLabel: true\r\n // };\r\n if (series.showType || !series.doubleYAxis) {\r\n option.xAxis = [{ type: \"category\", data: xAxisData }];\r\n option.yAxis = series.doubleYAxis\r\n ? [{ type: \"value\" }]\r\n : [{ type: \"value\" }, { type: \"value\" }];\r\n } else {\r\n option.xAxis = [{ type: \"value\" }];\r\n option.yAxis = [{ type: \"category\", data: xAxisData }];\r\n }\r\n\r\n //柱状图的时候两端留空。避免柱状图挡住y轴。折线图则不留空,\r\n if (data.style === 2) option.xAxis[0][\"boundaryGap\"] = true;\r\n if (data.conf) {\r\n let obj = data.conf;\r\n if (obj.yMin === 2) option.yAxis[0][\"min\"] = \"dataMin\";\r\n if (obj.xShowAll === 2)\r\n option.xAxis[0][\"axisLabel\"] = {\r\n interval: 0, //横轴信息全部显示\r\n rotate: 30\r\n };\r\n }\r\n if (data.rows.length > 20 && !series.dataZoom) {\r\n option.dataZoom = [\r\n {\r\n start: 0,\r\n end: 10,\r\n handleIcon:\r\n \"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z\",\r\n handleSize: \"80%\",\r\n handleStyle: {\r\n color: \"#fff\",\r\n shadowBlur: 3,\r\n shadowColor: \"rgba(0, 0, 0, 0.6)\",\r\n shadowOffsetX: 2,\r\n shadowOffsetY: 2\r\n }\r\n }\r\n ];\r\n option.grid.bottom = 50;\r\n } else {\r\n // option.grid.bottom = \"3%\";\r\n delete option.dataZoom;\r\n }\r\n option.legend = data.conf.legend;\r\n option.legend.data = legendData;\r\n return option;\r\n },\r\n buildPie(data, option) {\r\n let displayField = data.displayfield;\r\n let legendData = [];\r\n let seriesData = [];\r\n let xAxisField = data.xaxisField;\r\n let series = data.conf.series;\r\n if (xAxisField) xAxisField = xAxisField[0];\r\n if (series.showType) {\r\n let duration = 100 / data.rows.length;\r\n for (let j = 0; j < data.rows.length; j++) {\r\n let value = [];\r\n for (let i = 0; i < displayField.length; i++) {\r\n value.push({\r\n name: displayField[i].comment,\r\n value: data.rows[j][displayField[i].field.toUpperCase()]\r\n });\r\n if (j === 0) {\r\n legendData.push(displayField[i].comment);\r\n }\r\n }\r\n seriesData.push({\r\n name: data.rows[j][xAxisField.field.toUpperCase()],\r\n type: \"pie\",\r\n data: value,\r\n radius: [series.radius[0] + \"%\", series.radius[1] + \"%\"],\r\n center: [\r\n Number(series.center[0]) + j * duration + \"%\",\r\n series.center[1] + \"%\"\r\n ],\r\n roseType: series.roseType,\r\n selectedMode: series.selectedMode,\r\n label: {\r\n position: series.label.position\r\n },\r\n itemStyle: {\r\n emphasis: {\r\n shadowBlur: 10,\r\n shadowOffsetX: 0,\r\n shadowColor: \"rgba(0, 0, 0, 0.5)\"\r\n }\r\n }\r\n });\r\n }\r\n } else {\r\n let duration = 100 / displayField.length;\r\n for (let i = 0; i < displayField.length; i++) {\r\n let value = [];\r\n for (let j = 0; j < data.rows.length; j++) {\r\n value.push({\r\n name: data.rows[j][xAxisField.field.toUpperCase()],\r\n value: data.rows[j][displayField[i].field.toUpperCase()]\r\n });\r\n if (i === 0) {\r\n legendData.push(\r\n data.rows[j][xAxisField.field.toUpperCase()] + \"\"\r\n );\r\n }\r\n }\r\n seriesData.push({\r\n name: displayField[i].comment,\r\n type: \"pie\",\r\n data: value,\r\n radius: [series.radius[0] + \"%\", series.radius[1] + \"%\"],\r\n center: [\r\n Number(series.center[0]) + i * duration + \"%\",\r\n series.center[1] + \"%\"\r\n ],\r\n roseType: series.roseType,\r\n selectedMode: series.selectedMode,\r\n label: {\r\n position: series.label.position\r\n },\r\n itemStyle: {\r\n emphasis: {\r\n shadowBlur: 10,\r\n shadowOffsetX: 0,\r\n shadowColor: \"rgba(0, 0, 0, 0.5)\"\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n option.series = seriesData;\r\n option.tooltip = {\r\n trigger: \"item\",\r\n formatter: \"{a}
{b} : {c} ({d}%)\"\r\n };\r\n option.legend = data.conf.legend;\r\n option.legend.data = legendData;\r\n return option;\r\n },\r\n buildRadar(data, option) {\r\n let displayField = data.displayfield;\r\n let legendData = [];\r\n let xAxisField = data.xaxisField;\r\n let arr = [];\r\n let seriesData = [];\r\n let indicator = [];\r\n let series = data.conf.series;\r\n if (xAxisField) xAxisField = xAxisField[0];\r\n\r\n if (series.showType) {\r\n for (let j = 0; j < data.rows.length; j++) {\r\n let value = [];\r\n for (let i = 0; i < displayField.length; i++) {\r\n value.push(data.rows[j][displayField[i].field.toUpperCase()]);\r\n if (j === 0) {\r\n indicator.push({\r\n name: displayField[i].comment\r\n });\r\n }\r\n }\r\n legendData.push(data.rows[j][xAxisField.field.toUpperCase()] + \"\");\r\n arr.push({\r\n name: data.rows[j][xAxisField.field.toUpperCase()],\r\n value: value,\r\n areaStyle: {\r\n opacity: \"0\"\r\n }\r\n });\r\n }\r\n seriesData = [\r\n {\r\n type: \"radar\",\r\n data: arr,\r\n itemStyle: {\r\n emphasis: {\r\n areaStyle: {\r\n opacity: series.areaStyle ? \"0\" : \"0.5\"\r\n }\r\n }\r\n }\r\n }\r\n ];\r\n } else {\r\n for (let i = 0; i < displayField.length; i++) {\r\n let value = [];\r\n for (let j = 0; j < data.rows.length; j++) {\r\n value.push(data.rows[j][displayField[i].field.toUpperCase()]);\r\n if (i === 0) {\r\n indicator.push({\r\n name: data.rows[j][xAxisField.field.toUpperCase()]\r\n });\r\n }\r\n }\r\n legendData.push(displayField[i].comment);\r\n arr.push({\r\n name: displayField[i].comment,\r\n value: value,\r\n areaStyle: {\r\n opacity: \"0\"\r\n }\r\n });\r\n }\r\n seriesData = [\r\n {\r\n type: \"radar\",\r\n data: arr,\r\n itemStyle: {\r\n emphasis: {\r\n areaStyle: {\r\n opacity: series.areaStyle ? \"0\" : \"0.5\"\r\n }\r\n }\r\n }\r\n }\r\n ];\r\n }\r\n\r\n option.series = seriesData;\r\n option.radar = {\r\n center: [series.center[0] + \"%\", series.center[1] + \"%\"],\r\n radius: series.radius,\r\n indicator: indicator\r\n };\r\n option.legend = data.conf.legend;\r\n option.legend.data = legendData;\r\n return option;\r\n },\r\n buildFunnel(data, option) {\r\n let displayField = data.displayfield;\r\n let legendData = [];\r\n let xAxisField = data.xaxisField;\r\n let seriesData = [];\r\n let series = data.conf.series;\r\n if (xAxisField) xAxisField = xAxisField[0];\r\n\r\n //列数据展示\r\n if (series.showType) {\r\n let duration = 100 / data.rows.length;\r\n for (let j = 0; j < data.rows.length; j++) {\r\n let value = [];\r\n for (let i = 0; i < displayField.length; i++) {\r\n value.push({\r\n name: displayField[i].comment,\r\n value: data.rows[j][displayField[i].field.toUpperCase()]\r\n });\r\n if (j === 0) {\r\n legendData.push(displayField[i].comment);\r\n }\r\n }\r\n seriesData.push({\r\n name: data.rows[j][xAxisField.field.toUpperCase()],\r\n type: \"funnel\",\r\n data: value,\r\n width: duration - 5 + \"%\",\r\n left: j * duration + \"%\",\r\n funnelAlign: series.funnelAlign,\r\n sort: series.sort,\r\n label: {\r\n position: series.label.position\r\n }\r\n });\r\n }\r\n } else {\r\n //行数据展示\r\n let duration = 100 / displayField.length;\r\n for (let i = 0; i < displayField.length; i++) {\r\n let value = [];\r\n for (let j = 0; j < data.rows.length; j++) {\r\n value.push({\r\n name: data.rows[j][xAxisField.field.toUpperCase()],\r\n value: data.rows[j][displayField[i].field.toUpperCase()]\r\n });\r\n if (i === 0) {\r\n legendData.push(\r\n data.rows[j][xAxisField.field.toUpperCase()] + \"\"\r\n );\r\n }\r\n }\r\n seriesData.push({\r\n name: displayField[i].comment,\r\n type: \"funnel\",\r\n data: value,\r\n width: duration - 5 + \"%\",\r\n left: i * duration + \"%\",\r\n funnelAlign: series.funnelAlign,\r\n sort: series.sort,\r\n label: {\r\n position: series.label.position\r\n }\r\n });\r\n }\r\n }\r\n\r\n option.series = seriesData;\r\n\r\n option.legend = data.conf.legend;\r\n option.legend.data = legendData;\r\n return option;\r\n },\r\n buildScatter(data, option) {\r\n let displayField = data.displayfield;\r\n let legendData = [];\r\n let xAxisData = [];\r\n let xAxisField = data.xaxisField;\r\n let seriesData = [];\r\n let series = data.conf.series;\r\n if (xAxisField) xAxisField = xAxisField[0];\r\n\r\n if (series.showType) {\r\n for (let j = 0; j < data.rows.length; j++) {\r\n let value = [];\r\n for (let i = 0; i < displayField.length; i++) {\r\n if (j === 0) {\r\n xAxisData.push(displayField[i].comment);\r\n }\r\n value.push([\r\n displayField[i].comment,\r\n data.rows[j][displayField[i].field.toUpperCase()]\r\n ]);\r\n }\r\n legendData.push(data.rows[j][xAxisField.field.toUpperCase()] + \"\");\r\n seriesData.push({\r\n name: data.rows[j][xAxisField.field.toUpperCase()],\r\n type: \"scatter\",\r\n data: value\r\n });\r\n }\r\n } else {\r\n for (let i = 0; i < displayField.length; i++) {\r\n let value = [];\r\n for (let j = 0; j < data.rows.length; j++) {\r\n if (i === 0) {\r\n xAxisData.push(\r\n data.rows[j][xAxisField.field.toLocaleUpperCase()]\r\n );\r\n }\r\n value.push([\r\n data.rows[j][xAxisField.field.toLocaleUpperCase()],\r\n data.rows[j][displayField[i].field.toLocaleUpperCase()]\r\n ]);\r\n }\r\n legendData.push(displayField[i].comment);\r\n seriesData.push({\r\n name: displayField[i].comment,\r\n type: \"scatter\",\r\n data: value\r\n });\r\n if (displayField[i].regression && displayField[i].regression!=='none'){\r\n let myRegression = ecStat.regression(displayField[i].regression,value);\r\n myRegression.points.sort(function(a, b) {\r\n return a[0] - b[0];\r\n });\r\n seriesData.push({\r\n name: 'line',\r\n type: 'line',\r\n showSymbol: false,\r\n data: myRegression.points,\r\n markPoint: {\r\n itemStyle: {\r\n color: 'transparent'\r\n },\r\n label: {\r\n show: true,\r\n position: 'left',\r\n formatter: myRegression.expression,\r\n color: '#333',\r\n fontSize: 14\r\n },\r\n data: [{\r\n coord: myRegression.points[myRegression.points.length - 1]\r\n }]\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n option.series = seriesData;\r\n option.xAxis = {\r\n type: data.conf.series.xAxisType\r\n };\r\n if (data.conf.series.xAxisType==='category'){\r\n option.xAxis.data = xAxisData\r\n }\r\n option.yAxis = {};\r\n\r\n option.legend = data.conf.legend;\r\n option.legend.data = legendData;\r\n return option;\r\n },\r\n buildHeatmap(data, option) {\r\n let displayField = data.displayfield;\r\n let legendData = [];\r\n let rows = [];\r\n let columns = [];\r\n let arr = [];\r\n let max = 0;\r\n let xAxisField = data.xaxisField;\r\n if (xAxisField) xAxisField = xAxisField[0];\r\n\r\n for (let i = 0; i < data.rows.length; i++) {\r\n for (let j = 0; j < displayField.length; j++) {\r\n if (i === 0) {\r\n columns.push(displayField[j].comment);\r\n }\r\n arr.push([i, j, data.rows[i][displayField[j].field.toUpperCase()]]);\r\n if (data.rows[i][displayField[j].field.toUpperCase()] > max) {\r\n max = data.rows[i][displayField[j].field.toUpperCase()];\r\n }\r\n }\r\n rows.push(data.rows[i][xAxisField.field.toUpperCase()]);\r\n }\r\n option.series = [\r\n {\r\n name: \"sss\",\r\n type: \"heatmap\",\r\n data: arr,\r\n label: {\r\n normal: {\r\n show: true\r\n }\r\n }\r\n }\r\n ];\r\n option.xAxis = {\r\n type: \"category\",\r\n data: rows,\r\n splitArea: {\r\n show: true\r\n }\r\n };\r\n option.yAxis = {\r\n type: \"category\",\r\n data: columns,\r\n splitArea: {\r\n show: true\r\n }\r\n };\r\n option.visualMap = {\r\n min: 0,\r\n max: max,\r\n calculable: true,\r\n orient: \"horizontal\",\r\n left: \"center\",\r\n bottom: \"0%\"\r\n };\r\n option.tooltip = {\r\n position: \"top\"\r\n };\r\n\r\n option.legend = data.conf.legend;\r\n option.legend.data = legendData;\r\n return option;\r\n },\r\n getGrid() {\r\n let top = 0;\r\n let bottom = 0;\r\n let grid = {};\r\n if (this.customChart.conf.title.show) {\r\n if (this.customChart.conf.title.top === \"top\") {\r\n top += 7;\r\n if (this.customChart.conf.title.subtext) {\r\n top += 5;\r\n }\r\n } else if (this.customChart.conf.title.top === \"bottom\") {\r\n bottom += 16;\r\n }\r\n }\r\n if (this.customChart.conf.legend.show) {\r\n if (this.customChart.conf.legend.top === \"top\") {\r\n top += 7;\r\n } else if (this.customChart.conf.legend.top === \"bottom\") {\r\n bottom += 10;\r\n }\r\n }\r\n if (top !== 0) {\r\n grid.top = top + \"%\";\r\n } else {\r\n grid.top = \"5%\";\r\n }\r\n if (bottom !== 0) {\r\n grid.bottom = bottom + \"%\";\r\n }\r\n return grid;\r\n },\r\n getTitlePosition() {\r\n if (this.customChart.conf.title.top === \"top\") {\r\n return this.customChart.conf.legend.show &&\r\n this.customChart.conf.legend.top === \"top\"\r\n ? \"20\"\r\n : \"auto\";\r\n } else if (this.customChart.conf.title.top === \"bottom\") {\r\n return this.customChart.conf.legend.show &&\r\n this.customChart.conf.legend.top === \"bottom\"\r\n ? \"84%\"\r\n : \"88%\";\r\n } else {\r\n return this.customChart.conf.title.top;\r\n }\r\n },\r\n adjustChatTitle(data, option) {\r\n option.legend.top = 30;\r\n option.grid.top = 80;\r\n if (data.conf && data.conf.title && data.conf.title.subtext) {\r\n option.legend.top = 50;\r\n option.grid.top = 100;\r\n }\r\n }\r\n }\r\n};\r\n",null]}