sws
/
carInsightSystem_wxapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
dev
liuyongli 3 years ago
parent 8ca3b136f6
commit 3adabb1ed8
8 changed files with 734 additions and 16 deletions
Show Stats Download Patch File Download Diff File

223
components/indexCom/dataChild/index.js
Unescape View File

@ -2,7 +2,230 @@ Component({
data: {
active:0,
timelist: ['二十四小时', '最近七天', '最近三十天', '自定义'],
totallist:[
{
url:'/images/ruku.png',
text:'入库数据总量',
num:'198,897,987'
},
{
url:'/images/weibo.png',
text:'微博数据总量',
num:'198,897,987'
},
{
url:'/images/qita.png',
text:'其他数据总量',
num:'198,897,987'
},
{
url:'/images/shipin.png',
text:'短视频数据总量',
num:'198,897,987'
},
{
url:'/images/weixin.png',
text:'微信数据总量',
num:'198,897,987'
},
{
url:'/images/app.png',
text:'APP数据总量',
num:'198,897,987'
},
{
url:'/images/luntan.png',
text:'论坛数据总量',
num:'198,897,987'
},
{
url:'/images/xinwen.png',
text:'新闻数据总量',
num:'198,897,987'
}
],
showChart: true,
chartOption: {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
legend: {
icon: 'rectangle',//data图标样式
itemWidth: 10,//data图标大小
itemHeight: 10,
textStyle: {
fontSize: 9
},
data: ['微博', '其他','短视频', '微信','APP', '论坛', '新闻'],
// color:['#FF4852','#FF6E25','#FFBF00','#20CC62','#00D6D6','#00AAFF','#7257FF'],
},
//图表位置
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
yAxis: [
{
type: 'value',
axisTick:{
show:false //去除刻度线
},
axisLine:{
show:false //去除轴线
},
axisLabel: {
color: '#999999',//y轴文本颜色
textStyle: {
fontSize : 9
}
},
splitLine: { //分割线
// lineStyle:{
// // color:"#2d3436"
// }
show: true,
lineStyle: {
type: 'dashed',
color: '#E8E8E8',
}
}
}
],
xAxis: [
{
type: 'category',
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
axisTick:{
show:false //去除刻度线
},
axisLine:{
show:false, //去除轴线
},
axisLabel: {
color: '#999999',//x轴文本颜色
textStyle: {
fontSize : 9
}
}
}
],
series: [
{
name: '微博',
type: 'line',
symbol:'none', //去圆点
data: [1400, 2000, 1500, 1800, 1490, 900, 310],
itemStyle: {
normal:{
color: '#FF4852',
lineStyle: {
color: '#FF4852'
}
}
}
},
{
name: '其他',
type: 'line',
symbol:'none', //去圆点
data: [1520, 1052, 141, 174, 1690, 250, 220],
itemStyle: {
normal:{
color: '#FF6E25',
lineStyle: {
color: '#FF6E25'
}
}
}
},
{
name: '短视频',
type: 'line',
symbol:'none', //去圆点
data: [210, 322, 551, 364, 960, 1307, 10],
itemStyle: {
normal:{
color: '#FFBF00',
lineStyle: {
color: '#FFBF00'
}
}
}
},
{
name: '微信',
type: 'line',
symbol:'none', //去圆点
data: [250, 362, 71, 374, 970, 130, 170],
itemStyle: {
normal:{
color: '#20CC62',
lineStyle: {
color: '#20CC62'
}
}
}
},
{
name: 'APP',
type: 'line',
symbol:'none', //去圆点
data: [20, 32, 41, 354, 90, 130, 10],
itemStyle: {
normal:{
color: '#00D6D6',
lineStyle: {
color: '#00D6D6'
}
}
}
},
{
name: '论坛',
type: 'line',
symbol:'none', //去圆点
data: [200, 382, 661, 34, 909, 1308, 150],
itemStyle: {
normal:{
color: '#00AAFF',
lineStyle: {
color: '#00AAFF'
}
}
}
},
{
name: '新闻',
type: 'line',
symbol:'none', //去圆点
data: [250, 326, 178, 349, 900, 1300, 140],
itemStyle: {
normal:{
color: '#7257FF',
lineStyle: {
color: '#7257FF'
}
}
}
}
]
}
},
onShow() {
this.getTabBar().init();
},
methods: {
priceSel(e){

5
components/indexCom/dataChild/index.json
Unescape View File

@ -1,3 +1,6 @@
{
"component": true
"component": true,
"usingComponents": {
"c-echars": "../../c-echars/index"
}
}

42
components/indexCom/dataChild/index.wxml
Unescape View File

@ -5,23 +5,43 @@
</view>
<view class="trend">
<view class="text">入库数据趋势</view>
<view class="trend_tu">
<c-echars showChart="{{showChart}}" canvasId="eventbar-canvas" chartId="eventbar" chartOption="{{chartOption}}" height="100%"></c-echars>
</view>
</view>
<view class="data">
<view class="text">入库数据量</view>
<view class="Cumulative">
<view class="box">
<view class="box_num">12233</view>
<view class="box_text">历史累计入库</view>
</view>
<view class="box">
<view class="box_num">12233</view>
<view class="box_text">一年累计入库</view>
</view>
<view class="box">
<view class="box_num">12233</view>
<view class="box_text">半年累计入库</view>
<view class="Cumulative_box">
<view class="box">
<view class="box_num">12,233</view>
<view class="box_text">历史累计入库</view>
</view>
<view class="box2">
<view class="box_num">12,233</view>
<view class="box_text">一年累计入库</view>
</view>
<view class="box">
<view class="box_num">12,233</view>
<view class="box_text">半年累计入库</view>
</view>
</view>
</view>
<view class="total" wx:for="{{totallist}}" wx:key="url" >
<view class="content_left">
<view class="total_img">
<image style="width: 100%;height: 100%;" src="{{item.url}}"></image>
</view>
<view class="total_text">{{item.text}}</view>
</view>
<view class="content_left">
<view class="total_num">{{item.num}}</view>
<van-icon size="22px" name="arrow" style="color: rgb(232, 232, 232);margin-left: 10rpx;" />
</view>
</view>
</view>
</view>

49
components/indexCom/dataChild/index.wxss
Unescape View File

@ -32,6 +32,10 @@
margin: 32rpx;
border-radius: 4rpx;
}
.trend_tu{
width: 100%;
height: 350rpx;
}
.text{
font-size: 36rpx;
padding: 32rpx;
@ -48,12 +52,20 @@
width: 622rpx;
height: 108rpx;
background-color: #ebf5ff;
margin: 0rpx 32rpx;
margin: 0rpx 32rpx ;
}
.Cumulative_box{
padding: 24rpx;
display: flex;
text-align: center;
justify-content : space-between;
border: 1rpx solid #0084FF;
}
.box{
.box2{
width: 35%;
border-left: 1rpx solid #C0DFFF;
border-right: 1rpx solid #C0DFFF;
}
.box_num{
font-size: 24rpx;
@ -65,4 +77,35 @@
font-size: 20rpx;
font-weight: 400;
color: #67b3ff;
}
}
/* 总量 */
.total{
height: 128rpx;
line-height: 128rpx;
display: flex;
text-align: center;
justify-content: space-between;
margin: 0 32rpx;
}
.total_img{
width: 64rpx;
height: 64rpx;
border-radius: 12rpx;
margin: 20rpx 20rpx 0 0rpx;
}
.total_text{
color: #999999;
font-size: 28rpx;
}
.content_left{
display: flex;
}
.total_num{
color: #333333;
font-size: 28rpx;
font-weight: 600;
}

397
components/indexCom/soundChild/index.js
Unescape View File

@ -2,8 +2,405 @@ Component({
data: {
active:0,
timelist: ['二十四小时', '最近七天', '最近三十天', '自定义'],
showChart: true,
brandOption: {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
legend: {
icon: 'rectangle',//data图标样式
itemWidth: 10,//data图标大小
itemHeight: 10,
textStyle: {
fontSize: 9
},
data: ['微博', '其他','短视频', '微信','APP', '论坛', '新闻'],
},
//图表位置
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
yAxis: [
{
type: 'value',
axisTick:{
show:false //去除刻度线
},
axisLine:{
show:false //去除轴线
},
axisLabel: {
color: '#999999',//y轴文本颜色
textStyle: {
fontSize : 9
}
},
splitLine: { //分割线
// lineStyle:{
// // color:"#2d3436"
// }
show: true,
lineStyle: {
type: 'dashed',
color: '#E8E8E8',
}
}
}
],
xAxis: [
{
type: 'category',
data: ['长安', '大众', '丰田', '吉利', '哈佛'],
axisTick:{
show:false //去除刻度线
},
axisLine:{
show:false, //去除轴线
},
axisLabel: {
color: '#999999',//x轴文本颜色
textStyle: {
fontSize : 9
}
}
}
],
series: [
{
name: '微博',
type: 'bar',
data: [1400, 2000, 1500, 1800, 1490, 900, 310],
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
itemStyle: {
normal:{
color: '#FF4852',
lineStyle: {
color: '#FF4852'
}
}
}
},
{
name: '其他',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [1520, 1052, 141, 174, 1690, 250, 220],
itemStyle: {
normal:{
color: '#FF6E25',
lineStyle: {
color: '#FF6E25'
}
}
}
},
{
name: '短视频',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [210, 322, 551, 364, 960, 1307, 10],
itemStyle: {
normal:{
color: '#FFBF00',
lineStyle: {
color: '#FFBF00'
}
}
}
},
{
name: '微信',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [250, 362, 71, 374, 970, 130, 170],
itemStyle: {
normal:{
color: '#20CC62',
lineStyle: {
color: '#20CC62'
}
}
}
},
{
name: 'APP',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [20, 32, 41, 354, 90, 130, 10],
itemStyle: {
normal:{
color: '#00D6D6',
lineStyle: {
color: '#00D6D6'
}
}
}
},
{
name: '论坛',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [200, 382, 661, 34, 909, 1308, 150],
itemStyle: {
normal:{
color: '#00AAFF',
lineStyle: {
color: '#00AAFF'
}
}
}
},
{
name: '新闻',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [250, 326, 178, 349, 900, 1300, 140],
itemStyle: {
normal:{
color: '#7257FF',
lineStyle: {
color: '#7257FF'
}
}
}
}
]
},
modelOption: {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
legend: {
icon: 'rectangle',//data图标样式
itemWidth: 10,//data图标大小
itemHeight: 10,
textStyle: {
fontSize: 9
},
data: ['微博', '其他','短视频', '微信','APP', '论坛', '新闻'],
},
//图表位置
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
yAxis: [
{
type: 'value',
axisTick:{
show:false //去除刻度线
},
axisLine:{
show:false //去除轴线
},
axisLabel: {
color: '#999999',//y轴文本颜色
textStyle: {
fontSize : 9
}
},
splitLine: { //分割线
// lineStyle:{
// // color:"#2d3436"
// }
show: true,
lineStyle: {
type: 'dashed',
color: '#E8E8E8',
}
}
}
],
xAxis: [
{
type: 'category',
data: ['大众速腾', '激励帝豪', '吉利星越', '奥迪A4', '奥迪Q5'],
axisTick:{
show:false //去除刻度线
},
axisLine:{
show:false, //去除轴线
},
axisLabel: {
color: '#999999',//x轴文本颜色
textStyle: {
fontSize : 9
}
}
}
],
series: [
{
name: '微博',
type: 'bar',
data: [1400, 2000, 1500, 1800, 1490, 900, 310],
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
itemStyle: {
normal:{
color: '#FF4852',
lineStyle: {
color: '#FF4852'
}
}
}
},
{
name: '其他',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [1520, 1052, 141, 174, 1690, 250, 220],
itemStyle: {
normal:{
color: '#FF6E25',
lineStyle: {
color: '#FF6E25'
}
}
}
},
{
name: '短视频',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [210, 322, 551, 364, 960, 1307, 10],
itemStyle: {
normal:{
color: '#FFBF00',
lineStyle: {
color: '#FFBF00'
}
}
}
},
{
name: '微信',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [250, 362, 71, 374, 970, 130, 170],
itemStyle: {
normal:{
color: '#20CC62',
lineStyle: {
color: '#20CC62'
}
}
}
},
{
name: 'APP',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [20, 32, 41, 354, 90, 130, 10],
itemStyle: {
normal:{
color: '#00D6D6',
lineStyle: {
color: '#00D6D6'
}
}
}
},
{
name: '论坛',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [200, 382, 661, 34, 909, 1308, 150],
itemStyle: {
normal:{
color: '#00AAFF',
lineStyle: {
color: '#00AAFF'
}
}
}
},
{
name: '新闻',
type: 'bar',
stack:"Search Engine",
emphasis: {//折线图的高亮状态。
focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
},
data: [250, 326, 178, 349, 900, 1300, 140],
itemStyle: {
normal:{
color: '#7257FF',
lineStyle: {
color: '#7257FF'
}
}
}
}
]
},
},
onShow() {
this.getTabBar().init();
},
methods: {
priceSel(e){
this.setData({

5
components/indexCom/soundChild/index.json
Unescape View File

@ -1,3 +1,6 @@
{
"component": true
"component": true,
"usingComponents": {
"c-echars": "../../c-echars/index"
}
}

13
components/indexCom/soundChild/index.wxml
Unescape View File

@ -3,4 +3,17 @@
<view wx:for="{{timelist}}" class="{{index === intervalSel?'active':''}}" wx:key="index" data-index="{{index}}" bindtap="priceSel">{{item}}
</view>
</view>
<view class="brand">
<view class="text">品牌传播声量</view>
<view class="brand_tu">
<c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{brandOption}}" height="100%"></c-echars>
</view>
</view>
<view class="brand">
<view class="text">车型传播声量</view>
<view class="brand_tu">
<c-echars showChart="{{showChart}}" canvasId="modelbar-canvas" chartId="modelbar" chartOption="{{modelOption}}" height="100%"></c-echars>
</view>
</view>
</view>

16
components/indexCom/soundChild/index.wxss
Unescape View File

@ -23,4 +23,20 @@
border-radius: 4rpx;
line-height: 64rpx;
height: 64rpx;
}
/* 品牌传播声量 */
.brand{
width: 100%;
height: 484rpx;
background-color: #fff;
margin: 32rpx;
border-radius: 4rpx;
}
.brand_tu{
width: 100%;
height: 350rpx;
}
.text{
font-size: 36rpx;
padding: 32rpx;
}
Write Preview
Loading…
Cancel
Save