|
|
@@ -16,12 +16,14 @@ Component({
|
|
|
lifetimes: {
|
|
|
attached: function () {
|
|
|
getApp().globalData.Language.getLanguagePackage(this)
|
|
|
+ this.setData({
|
|
|
+ "content.dataid": wx.getStorageSync('userMsg').userid,
|
|
|
+ "content.username": wx.getStorageSync('userMsg').name,
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
data: {
|
|
|
"content": {
|
|
|
- dataid: wx.getStorageSync('userMsg').userid,
|
|
|
- username: wx.getStorageSync('userMsg').name,
|
|
|
enddate: new Date().toISOString().split('T')[0],
|
|
|
where: {}
|
|
|
},
|
|
|
@@ -56,96 +58,96 @@ Component({
|
|
|
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"
|
|
|
- }];
|
|
|
+ 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
|
|
|
+ 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;
|
|
|
+ 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,
|
|
|
+ }
|
|
|
},
|
|
|
- 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,
|
|
|
- smooth: true, // Enable smooth transition for line charts
|
|
|
- itemStyle: {
|
|
|
- color: v.color
|
|
|
+ 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
|
|
|
+ }
|
|
|
},
|
|
|
- lineStyle: {
|
|
|
- color: v.color
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ 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,
|
|
|
+ smooth: true, // Enable smooth transition for line charts
|
|
|
+ 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;
|
|
|
+ const chart = echarts.init(canvas, null, {
|
|
|
+ width,
|
|
|
+ height,
|
|
|
+ devicePixelRatio: dpr
|
|
|
+ });
|
|
|
+ chart.setOption(option);
|
|
|
+ return chart;
|
|
|
});
|
|
|
},
|
|
|
changeDate({
|