|
|
@@ -0,0 +1,165 @@
|
|
|
+const _Http = getApp().globalData.http,
|
|
|
+ currency = require("../../../utils/currency"),
|
|
|
+ CNY = (value, symbol = "￥", precision = 2) => currency(value, {
|
|
|
+ symbol,
|
|
|
+ precision
|
|
|
+ }).format();
|
|
|
+
|
|
|
+import * as echarts from '../../ec-canvas/echarts';
|
|
|
+Component({
|
|
|
+ properties: {
|
|
|
+
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ addGlobalClass: true
|
|
|
+ },
|
|
|
+ lifetimes: {
|
|
|
+ attached: function () {
|
|
|
+ getApp().globalData.Language.getLanguagePackage(this)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ "content": {
|
|
|
+ dataid: wx.getStorageSync('userMsg').userid,
|
|
|
+ username: wx.getStorageSync('userMsg').name,
|
|
|
+ enddate: new Date().toISOString().split('T')[0],
|
|
|
+ where: {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getList(init = false) {
|
|
|
+ let content = this.data.content
|
|
|
+ const {
|
|
|
+ dataid,
|
|
|
+ type,
|
|
|
+ username,
|
|
|
+ isleave
|
|
|
+ } = getCurrentPages()[getCurrentPages().length - 1].data;
|
|
|
+ if (content.dataid != dataid || content.type != type || isleave != isleave) init = true
|
|
|
+ content.dataid = dataid;
|
|
|
+ content.type = type;
|
|
|
+ content.username = username;
|
|
|
+ content.where.isleave = isleave;
|
|
|
+
|
|
|
+ _Http.basic({
|
|
|
+ "id": 20231015124404,
|
|
|
+ content
|
|
|
+ }).then(res => {
|
|
|
+ console.log("近12月线索转化分析", res)
|
|
|
+ if (res.code != '1') return wx.showToast({
|
|
|
+ title: res.data,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ this.initChart(res.data.histogram.concat(res.data.lineChart), res.data.lineChart.map(v => v.date))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChart(data, dates) {
|
|
|
+ console.log("data", data)
|
|
|
+ let dividend = wx.getStorageSync('languagecode') == 'ZH' ? 10000 : 1000,
|
|
|
+ getMapText = getApp().globalData.Language.getMapText,
|
|
|
+ list = [{
|
|
|
+ name: "转化总次数",
|
|
|
+ color: "#6395F9"
|
|
|
+ }, {
|
|
|
+ name: "转化项目次数",
|
|
|
+ color: "#62DAAB"
|
|
|
+ }, {
|
|
|
+ name: "转化客户次数",
|
|
|
+ color: "#657797"
|
|
|
+ }, {
|
|
|
+ name: "总次数同比增长率",
|
|
|
+ color: "#F6C022"
|
|
|
+ }];
|
|
|
+ list.map(item => {
|
|
|
+ item.data = data.filter(v => v.key == item.name).map(v => v.value)
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ console.log("list", list)
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ confine: true,
|
|
|
+ formatter: function (params) {
|
|
|
+ let tooltipText = '';
|
|
|
+ params.forEach((item, index) => {
|
|
|
+ tooltipText += `${index==0?item.axisValue+'\n':''}${item.marker}${item.seriesName}: ${item.seriesName == getMapText('总次数同比增长率') ? (item.value * 100).toFixed(2) :item.value}${item.seriesName == getMapText('总次数同比增长率') ? '%' : ''}\n`;
|
|
|
+ });
|
|
|
+ return tooltipText;
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 10,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: list.map(v => getMapText(v.name)),
|
|
|
+ top: '0rpx', // Moved legend position upwards by 10rpx
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12 // Reduced font size for legend text
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '32%', // Adjust grid top to leave space for the legend
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: dates,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0, // Force display all labels
|
|
|
+ rotate: 45, // Rotate labels to prevent overlap
|
|
|
+ fontSize: 10 // Reduced font size for X-axis labels
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 10 // Reduced font size for Y-axis labels
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: list.map(v => {
|
|
|
+ return {
|
|
|
+ name: getMapText(v.name),
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ data: v.data,
|
|
|
+ itemStyle: {
|
|
|
+ color: v.color
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: v.color
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ };
|
|
|
+ this.chartComponent = this.selectComponent('#mychart');
|
|
|
+ this.chartComponent.init((canvas, width, height, dpr) => {
|
|
|
+ const chart = echarts.init(canvas, null, {
|
|
|
+ width,
|
|
|
+ height,
|
|
|
+ devicePixelRatio: dpr
|
|
|
+ });
|
|
|
+ chart.setOption(option);
|
|
|
+ return chart;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeDate({
|
|
|
+ detail
|
|
|
+ }) {
|
|
|
+ this.setData({
|
|
|
+ "content.enddate": detail
|
|
|
+ })
|
|
|
+ this.getList(true)
|
|
|
+ },
|
|
|
+ showExplain(e) {
|
|
|
+ const {
|
|
|
+ name
|
|
|
+ } = e.currentTarget.dataset;
|
|
|
+ getApp().globalData.Language.modeBoxPrompts(getApp().globalData.Language.getMapText('统计到当前查询时间为止的') + name + "(" + getApp().globalData.Language.getMapText('审核状态') + ")")
|
|
|
+ },
|
|
|
+ }
|
|
|
+})
|
