Skip to content

C
crisis-event-miniprogram
Commit a59abf8d by liangyuhang
Options

趋势图修改

parent ecd5913f
Showing with 337 additions and 187 deletions
app.json
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
"pages/usercenter/usercenter", "pages/usercenter/usercenter",
"pages/search-page/search-page", "pages/search-page/search-page",
"pages/search-result/search-result", "pages/search-result/search-result",
"pages/event-detail/event-detail" "pages/event-detail/event-detail",
"pages/out/out"
], ],
"window": { "window": {
......
app.wxss
...@@ -29,3 +29,14 @@ ...@@ -29,3 +29,14 @@
border-radius: 10rpx; border-radius: 10rpx;
transform: translateY(-50%); transform: translateY(-50%);
} }
.moudle-title-right{
position:absolute;
right: 30rpx;
}
.top{
width: 100%;
height: 350rpx;
background-image: linear-gradient(#025FEA 60%,#F7F7F7 100%);
margin-bottom: -350rpx;
}
components/eventList/eventList.wxss
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
bottom: 15rpx; bottom: 15rpx;
left: 0; left: 0;
padding: 5rpx 10rpx; padding: 5rpx 10rpx;
border-radius: 5rpx;
} }
.r .time{ .r .time{
position: absolute; position: absolute;
......
components/out/out.js deleted 100644 → 0
// components/out/out.js
Component({
/**
* 组件的属性列表
*/
properties: {
url: String
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
components/out/out.wxss deleted 100644 → 0
/* components/out/out.wxss */
\ No newline at end of file
components/reportList/reportList.js
...@@ -21,7 +21,7 @@ Component({ ...@@ -21,7 +21,7 @@ Component({
toUrl(e){ toUrl(e){
var _url=e.currentTarget.dataset.url var _url=e.currentTarget.dataset.url
wx.navigateTo({ wx.navigateTo({
url: '/components/out/out?url='+_url url: '/pages/out/out?url='+_url
}) })
} }
} }
......
components/top/top.js deleted 100644 → 0
// components/top/top.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
components/top/top.json deleted 100644 → 0
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
components/top/top.wxml deleted 100644 → 0
<!--components/top/top.wxml-->
<view class="top"></view>
components/top/top.wxss deleted 100644 → 0
/* components/top/top.wxss */
.top{
width: 100%;
height: 350rpx;
background-image: linear-gradient(#025FEA 60%,#F7F7F7 100%);
margin-bottom: -350rpx;
}
\ No newline at end of file
components/trends/trends.js
// components/trends/trends.js // components/trends/trends.js
import * as echarts from "../ec-canvas/echarts" import * as echarts from "../ec-canvas/echarts"
const moment = require('../../utils/moment.min.js')
const app = getApp() const app = getApp()
Component({ Component({
observers: {
'data,timeType': function (data,timeType) {
if (data) {
this.draw()
}
}
},
lifetimes: {
attached: function () {
this.echartsComponnet = this.selectComponent('#trends')
},
},
/** /**
* 组件的属性列表 * 组件的属性列表
*/ */
properties: { properties: {
list: Object data: Object,
timeType: String
}, },
/** /**
...@@ -15,90 +29,182 @@ Component({ ...@@ -15,90 +29,182 @@ Component({
*/ */
data: { data: {
ec: { ec: {
onInit: initChart llazyLoadazy: true
}, },
isDev:app.globalData.isDev isDev:app.globalData.isDev,
}, },
/** /**
* 组件的方法列表 * 组件的方法列表
*/ */
methods: { methods: {
draw () {
this.echartsComponnet.init((canvas, width, height, dpr) => {
let chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
})
canvas.setChart(chart)
chart.setOption(getOption(getList(this.properties.data,this.properties.timeType),this.properties.data.times))
return chart
})
}
} }
}) })
function initChart(canvas, width, height, dpr) { function getOption(list,times){
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = { let articleCountList = list.map(myFunction1)
tooltip: { let posCountList = list.map(myFunction2)
trigger: 'axis' let neuCountList = list.map(myFunction3)
}, let negCountList = list.map(myFunction4)
legend: {}, let timeList = list.map(myFunction5)
xAxis: {
type: 'category', var option = {
boundaryGap: false, legend: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] icon: "circle",
}, itemHeight: 10,
yAxis: { itemWidth: 10,
type: 'value', data: ['全部', '正', '中', '负'],
axisLabel: { selected: {
formatter: '{value} °C' '全部':true,
} '正':false,
}, '中':false,
series: [ '负':false
{ },
name: 'Highest', left: 10,
type: 'line', top: 10
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
}, },
markLine: { tooltip: {
data: [{ type: 'average', name: 'Avg' }] trigger: 'axis'
}
},
{
name: 'Lowest',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
}, },
markLine: { xAxis: {
data: [ type: 'category',
{ type: 'average', name: 'Avg' }, data: timeList,
[ boundaryGap: false,
{ // axisLabel:{
symbol: 'none', // formatter (val) {
x: '90%', // return moment(Number(val)).format('YYYY-MM-DD')
yAxis: 'max' // }
}, // },
{ axisTick:{
symbol: 'circle', length:5
label: { }
position: 'start', },
formatter: 'Max' yAxis: {
}, type: 'value'
type: 'max', },
name: '最高点' grid: {
} left: '3%',
] right: '10%',
] bottom: '10%',
} containLabel: true
} },
] series: [
}; {
name: '全部',
data: articleCountList,
type: 'line',
smooth: true,
markLine: {
data: [
{ type: 'max', name: '峰值' },
{ type: 'average', name: '均值' }
]
}
// markArea: {
// data: [
// [
// {
// name: '上升期',
// xAxis: moment(Number(times[0].start)).format('YYYY-MM-DD')
// },
// {
// xAxis: moment(Number(times[0].end)).format('YYYY-MM-DD')
// }
// ],
// [
// {
// name: '热议期',
// xAxis: moment(Number(times[1].start)).format('YYYY-MM-DD')
// },
// {
// xAxis: moment(Number(times[1].end)).format('YYYY-MM-DD')
// }
// ],
// [
// {
// name: '衰退期',
// xAxis: moment(Number(times[2].start)).format('YYYY-MM-DD')
// },
// {
// xAxis: moment(Number(times[2].end)).format('YYYY-MM-DD')
// }
// ]
// ]
// }
},
{
name: '正',
data: posCountList,
type: 'line',
smooth: true,
markLine: {
data: [
{ type: 'max', name: '峰值' },
{ type: 'average', name: '均值' }
]
}
},
{
name: '中',
data: neuCountList,
type: 'line',
smooth: true,
markLine: {
data: [
{ type: 'max', name: '峰值' },
{ type: 'average', name: '均值' }
]
}
},
{
name: '负',
data: negCountList,
type: 'line',
smooth: true,
markLine: {
data: [
{ type: 'max', name: '峰值' },
{ type: 'average', name: '均值' }
]
}
},
]
};
return option;
}
chart.setOption(option); function getList(data,timeType){
return chart; return timeType=="Day"?data.lineDay:data.lineHour;
}
function myFunction1(value) {
return value.articleCount;
}
function myFunction2(value) {
return value.posArticleCount;
} }
function myFunction3(value) {
return value.neuArticleCount;
}
function myFunction4(value) {
return value.negArticleCount;
}
function myFunction5(value) {
return moment(Number(value.time)).format('YYYY-MM-DD')
}
pages/event-detail/event-detail.js
...@@ -11,7 +11,7 @@ Page({ ...@@ -11,7 +11,7 @@ Page({
venation:[], venation:[],
overview:[], overview:[],
detail:[], detail:[],
lineHour:[], line:[],
hasCollect:false, hasCollect:false,
showDetail: true, showDetail: true,
starMap:[ starMap:[
...@@ -20,7 +20,9 @@ Page({ ...@@ -20,7 +20,9 @@ Page({
{level:3,name:"一般"}, {level:3,name:"一般"},
{level:4,name:"较大"}, {level:4,name:"较大"},
{level:5,name:"重大"} {level:5,name:"重大"}
] ],
timeType:['小时','天'],
timeIndex:0
}, },
/** /**
...@@ -38,7 +40,7 @@ Page({ ...@@ -38,7 +40,7 @@ Page({
//基本信息 //基本信息
this.getDetail(); this.getDetail();
//危机趋势 //危机趋势
this.getLineHour(); this.getLine();
}, },
getVenation(){ getVenation(){
http.getRequest('/events/'+this.data.eventId+'/venation').then(res=>{ http.getRequest('/events/'+this.data.eventId+'/venation').then(res=>{
...@@ -83,11 +85,11 @@ Page({ ...@@ -83,11 +85,11 @@ Page({
}) })
}); });
}, },
getLineHour(){ getLine(){
http.getRequest('/events/'+this.data.eventId+'/spread/line').then(res=>{ http.getRequest('/events/'+this.data.eventId+'/spread/line').then(res=>{
if(res.data.success){ if(res.data.success){
this.setData({ this.setData({
lineHour: res.data.data.lineHour line: res.data.data
}) })
} }
}).catch(() => { }).catch(() => {
......
pages/event-detail/event-detail.json
{ {
"usingComponents": { "usingComponents": {
"top": "/components/top/top",
"grade": "/components/grade/grade", "grade": "/components/grade/grade",
"pie": "/components/pie/pie", "pie": "/components/pie/pie",
"trends": "/components/trends/trends", "trends": "/components/trends/trends",
......
pages/event-detail/event-detail.wxml
<!--pages/event-detail/event-detail.wxml--> <!--pages/event-detail/event-detail.wxml-->
<import src="../../templates/top" />
<scroll-view scroll-y="true" class="container"> <scroll-view scroll-y="true" class="container">
<!-- 头部背景 --> <!-- 顶部背景色 -->
<top></top> <template is="top"></template>
<!-- 事件信息 --> <!-- 事件信息 -->
<view class="event-center"> <view class="event-center">
...@@ -14,16 +16,18 @@ ...@@ -14,16 +16,18 @@
<view class="desc">{{detail.introduction}}</view> <view class="desc">{{detail.introduction}}</view>
</view> </view>
</view> </view>
<view class="event-tag"> <view class="event-bottom">
<view class="brand"> <view class="event-tag">
涉事品牌：{{detail.priBrand}} <view class="brand">
</view> 涉事品牌：{{detail.priBrand}}
<view class="crisis"> </view>
危机类型：{{detail.priCrisisTags}} <view class="crisis">
危机类型：{{detail.priCrisisTags}}
</view>
</view> </view>
<view class="star"> <view class="star">
<image src="../../image/star-active.png" lazy-load="true" bindtap="cancelCollect" data-id="{{detail.id}}" wx:if="{{hasCollect}}" ></image> <image src="../../image/star-active.png" lazy-load="true" bindtap="cancelCollect" data-id="{{detail.id}}" wx:if="{{hasCollect}}" ></image>
<image src="../../image/star.png" lazy-load="true" bindtap="collect" data-id="{{detail.id}}" wx:else></image> <image src="../../image/star.png" lazy-load="true" bindtap="collect" data-id="{{detail.id}}" wx:else></image>
</view> </view>
</view> </view>
</view> </view>
...@@ -41,7 +45,7 @@ ...@@ -41,7 +45,7 @@
<text>{{overview.crisisLevelZh}}风险</text> <text>{{overview.crisisLevelZh}}风险</text>
</view> </view>
<view class="star"> <view class="star">
<block wx:for="{{starMap}}" wx:for="index"> <block wx:for="{{starMap}}" wx:key="index">
<view wx:if="{{overview.crisisLevel>=index+1}}"><image src="../../image/star-active.png" lazy-load="true"></image></view> <view wx:if="{{overview.crisisLevel>=index+1}}"><image src="../../image/star-active.png" lazy-load="true"></image></view>
<view wx:if="{{overview.crisisLevel<index+1}}"><image src="../../image/star.png" lazy-load="true"></image></view> <view wx:if="{{overview.crisisLevel<index+1}}"><image src="../../image/star.png" lazy-load="true"></image></view>
</block> </block>
...@@ -100,7 +104,7 @@ ...@@ -100,7 +104,7 @@
<!-- 趋势 --> <!-- 趋势 -->
<view class="trend-container"> <view class="trend-container">
<view class="moudle-title">危机趋势图</view> <view class="moudle-title">危机趋势图</view>
<trends list="{{lineHour}}"></trends> <trends data="{{line}}" timeType="Day"></trends>
</view> </view>
......
pages/event-detail/event-detail.wxss
...@@ -50,20 +50,33 @@ page{ ...@@ -50,20 +50,33 @@ page{
overflow: hidden; overflow: hidden;
margin-top: 20rpx; margin-top: 20rpx;
} }
.event-center .event-tag{ .event-bottom{
position: relative;
display: flex; display: flex;
justify-content: space-around;
height: 100rpx; height: 100rpx;
color: #666;
font-size: 28rpx;
line-height: 100rpx; line-height: 100rpx;
padding: 0 30rpx;
} }
.event-center .event-tag .brand{ .event-bottom .event-tag{
margin-right: 20rpx; display: flex;
font-size: 26rpx;
color: #666;
} }
.event-center .event-tag .star image{ .event-bottom .event-tag .brand{
width: 30rpx; margin-right: 30rpx;
height: 30rpx; }
.event-bottom .event-tag .brand::after{
content: '';
padding-right: 30rpx;
border-right: 1px solid #ccc;
}
.event-bottom .star image{
position: absolute;
width: 26rpx;
height: 26rpx;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
} }
/* 提要 */ /* 提要 */
...@@ -141,23 +154,22 @@ page{ ...@@ -141,23 +154,22 @@ page{
color:#999 color:#999
} }
/* 脉络 */
.venation-container{
/* 危机趋势 */
.trend-container{
height: 550rpx;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
box-shadow: 0px 5px 5px #e8e8e8; box-shadow: 0px 5px 5px #e8e8e8;
margin-top: 30rpx; margin-top: 30rpx;
} }
/* 脉络 */ /* 危机趋势 */
.venation-container{ .trend-container{
height: 550rpx;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
box-shadow: 0px 5px 5px #e8e8e8; box-shadow: 0px 5px 5px #e8e8e8;
margin-top: 30rpx; margin-top: 30rpx;
} }
pages/event-detail/venations/venations.js
...@@ -25,7 +25,7 @@ Component({ ...@@ -25,7 +25,7 @@ Component({
// console.log(_url) // console.log(_url)
wx.navigateTo({ wx.navigateTo({
// url: _url // url: _url
url: '/components/out/out?url='+_url url: '/pages/out/out?url='+_url
}) })
}, },
// 展示图片 // 展示图片
......
pages/index/index.js
...@@ -123,7 +123,7 @@ Page({ ...@@ -123,7 +123,7 @@ Page({
var _url=e.currentTarget.dataset.url var _url=e.currentTarget.dataset.url
console.log(_url) console.log(_url)
wx.navigateTo({ wx.navigateTo({
url: '/components/out/out?url='+_url url: '/pages/out/out?url='+_url
}) })
} }
}) })
pages/index/index.json
{ {
"usingComponents": { "usingComponents": {
"top": "/components/top/top"
}, },
"enablePullDownRefresh": true, "enablePullDownRefresh": true,
"backgroundColor": "#025FEA", "backgroundColor": "#025FEA",
......
pages/index/index.wxml
<!--index.wxml--> <!--index.wxml-->
<import src="../../templates/top" />
<view class="container"> <view class="container">
<scroll-view style="height: 100vh;background-color: #F7F7F7;" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true"> <scroll-view style="height: 100vh;background-color: #F7F7F7;" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true">
<!-- 顶部背景色 --> <!-- 顶部背景色 -->
<top></top> <template is="top"></template>
<!-- 横幅 --> <!-- 横幅 -->
<view class="banner" wx:if="{{showBanner}}"> <view class="banner" wx:if="{{showBanner}}">
...@@ -158,7 +160,7 @@ ...@@ -158,7 +160,7 @@
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
......
pages/out/out.js 0 → 100644
// pages/out/out.js
Page({
/**
* 页面的初始数据
*/
data: {
url:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options.url)
this.setData({
url: options.url
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
components/out/out.json → pages/out/out.json
{ {
"component": true,
"usingComponents": {} "usingComponents": {}
} }
\ No newline at end of file
components/out/out.wxml → pages/out/out.wxml
<!--components/out/out.wxml--> <!--pages/out/out.wxml-->
<!-- 跳转外部链接 --> <!-- 跳转外部链接 -->
<web-view src="{{url}}"></web-view> <web-view src="{{url}}"></web-view>
\ No newline at end of file
pages/out/out.wxss 0 → 100644
/* pages/out/out.wxss */
\ No newline at end of file
pages/usercenter/usercenter.json
{ {
"usingComponents": { "usingComponents": {
"top": "/components/top/top"
} }
} }
\ No newline at end of file
pages/usercenter/usercenter.wxml
<!--pages/usercenter/usercenter.wxml--> <!--pages/usercenter/usercenter.wxml-->
<import src="../../templates/top" />
<view class="usercenter"> <view class="usercenter">
<!-- 头部背景 -->
<top/> <!-- 顶部背景色 -->
<template is="top"></template>
<!-- 用户信息 --> <!-- 用户信息 -->
<view class="userinfo"> <view class="userinfo">
......
templates/top.wxml 0 → 100644
<template name="top">
<view class="top"></view>
</template>
\ No newline at end of file
utils/util.js
...@@ -15,5 +15,5 @@ const formatNumber = n => { ...@@ -15,5 +15,5 @@ const formatNumber = n => {
} }
module.exports = { module.exports = {
formatTime formatTime: formatTime
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment