admin/lichebao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

渠道首页

Browse Source
This commit is contained in:
老叶
2021-09-14 15:22:36 +08:00
parent 15b9cba7c1
commit 424c642d32
6 changed files with 219 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
commons/css/base/layout.wxss
+1
View File
@@ -119,6 +119,7 @@
.height-120{height:120rpx;box-sizing:border-box;}
.height-190{height:190rpx;box-sizing:border-box;}
.height-240{height:240rpx;box-sizing:border-box;}
.height-600{height:600rpx;box-sizing:border-box;}
.tabmenu{line-height:80rpx;}
.tabmenu.active::before{display:block;position:absolute;bottom:0;left:50%;width:30rpx;height:4rpx;margin-left:-15rpx;content:"";background-color:#36afa2;}
ecCanvas/components/ec-canvas/echarts.js
+24 -1
View File
File diff suppressed because one or more lines are too long
pages/channel/index.js
+158 -22
View File
@@ -1,18 +1,5 @@
import * as echarts from '../../ecCanvas/components/ec-canvas/echarts';
let chartData;
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
let option = chartData
chart.setOption(option);
return chart;
}
import _ from '../../commons/js/commons'
import * as echarts from '../../ecCanvas/components/ec-canvas/echarts';
const app = getApp()
Page({
data: {
@@ -40,6 +27,22 @@ Page({
deallist:'',
hoursTip:'',
cityarray: ['厦门', '泉州', '福州', ],
cityobj: [
{
id: 0,
name: '厦门'
},
{
id: 1,
name: '泉州'
},
{
id: 2,
name: '福州'
},
],
cityIndex: 0,
},
@@ -49,16 +52,12 @@ Page({
[key]: options[key]
})
}
chartData = res.data
this.setData({
showChart:true,
['ec.onInit']: initChart
})
this.getUserInfo()
this.getBar()
this.getLine()
},
onShow: function () {
@@ -92,6 +91,48 @@ Page({
});
},
//选择城市
changeCity(e) {
this.setData({
cityIndex: e.detail.value
})
},
getBar(){
this.setData({
ecBar: {
onInit: function (canvas, width, height, dpr) {
const barChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(barChart);
barChart.setOption(getBarOption());
return barChart;
}
},
})
},
getLine(){
this.setData({
ecLine: {
onInit: function (canvas, width, height, dpr) {
const lineChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(lineChart);
lineChart.setOption(getLineOption());
return lineChart;
}
}
})
},
//推送链接
pushLink(e) {
if(e.currentTarget.dataset.url){
@@ -111,4 +152,99 @@ Page({
},
})
})
function getBarOption() {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: 'bottom',
data: ['丰泽店', '鲤城区', '南安店',]
},
grid: {
top: '8%',
left: '2%',
right: '5%',
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['1月', '2月', '3月',]
},
series: [
{
name: '丰泽店',
type: 'bar',
data: [18, 23, 29,]
},
{
name: '鲤城区',
type: 'bar',
data: [19, 23, 31,]
},
{
name: '南安店',
type: 'bar',
data: [19, 23, 31, ]
},
]
};
}
function getLineOption() {
return{
tooltip: {
trigger: 'axis'
},
legend: {
top: 'bottom',
data: ['丰泽店', '鲤城区', '南安店',]
},
grid: {
top: '10%',
left: '2%',
right: '5%',
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月',]
},
yAxis: {
type: 'value'
},
series: [
{
name: '丰泽店',
type: 'line',
stack: '总量',
data: [120, 132, 101,]
},
{
name: '鲤城区',
type: 'line',
stack: '总量',
data: [220, 182, 191, ]
},
{
name: '南安店',
type: 'line',
stack: '总量',
data: [820, 932, 901, ]
}
]
};
}
pages/channel/index.json
+1 -1
View File
@@ -5,6 +5,6 @@
"backgroundColor": "#ffffff",
"backgroundColorTop": "#1a1c26",
"usingComponents": {
"ec-canvas": "../../ecCanvas/components/ec-canvas/ec-canvas"
}
}
pages/channel/index.wxml
+35 -7
View File
@@ -12,6 +12,7 @@
</view>
</view>
</view>
<!-- 管辖门店 -->
<view class="mt40 inner30 pt40 bg-fff box-shadow-000-10-10 ulib-r10">
<view class="font-36">管辖门店</view>
<view>
@@ -27,17 +28,44 @@
</block>
</view>
</view>
<!-- 数据分析·客户 -->
<view class="mt40 inner30 pt40 bg-fff box-shadow-000-10-10 ulib-r10">
<view class="relative">
<view class="font-36">数据分析·客户</view>
<picker class="absolute right-0 box-middle" bindchange="changeCity" value="{{cityIndex}}" range="{{cityarray}}">
<view class="pt10 pb10 pl20 pr20 bg-f6 ulib-r10 font-22">
<text>{{cityarray[cityIndex]}}</text>
<i class="iconfont ml20 icon-xiala color-999"></i>
</view>
</picker>
</view>
<view class="relative height-600 z-index-0">
<view class="absolute wp100 height-600">
<ec-canvas class="absolute top-0 bottom-0 left-0 right-0" ec="{{ ecBar }}"></ec-canvas>
</view>
</view>
</view>
<!-- 数据分析·订单 -->
<view class="mt40 inner30 pt40 bg-fff box-shadow-000-10-10 ulib-r10">
<view class="relative">
<view class="font-36">数据分析·订单</view>
<picker class="absolute right-0 box-middle" bindchange="changeCity" value="{{cityIndex}}" range="{{cityarray}}">
<view class="pt10 pb10 pl20 pr20 bg-f6 ulib-r10 font-22">
<text>{{cityarray[cityIndex]}}</text>
<i class="iconfont ml20 icon-xiala color-999"></i>
</view>
</picker>
</view>
<view class="relative height-600 z-index-0">
<view class="absolute wp100 height-600">
<ec-canvas class="absolute top-0 bottom-0 left-0 right-0" ec="{{ ecLine }}"></ec-canvas>
</view>
</view>
</view>
</view>
</view>
<view class="container relative">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
<!-- <lcb-footer></lcb-footer> -->
<lcb-shopTabBarNav currentIndex='0'></lcb-shopTabBarNav>
pages/channel/index.wxss
-7
View File
@@ -1,8 +1 @@
.bg-2e3246-8058fe{background-image:linear-gradient(45deg, #2e3246, #1a1c26);}
.bg-1c89fd-8058fe{background-image:linear-gradient(45deg, #1c89fd, #8058fe);}
.bg-fe606c-ff9026{background-image:linear-gradient(45deg, #fe606c, #ff9026);}
ec-canvas {
width: 100%;
height: 100%;
}