Skip to content

C
crisis-event-miniprogram
Commit a59abf8d by liangyuhang
Options

趋势图修改

parent ecd5913f
Showing with 300 additions and 150 deletions
app.json
......@@ -6,7 +6,8 @@
"pages/usercenter/usercenter",
"pages/search-page/search-page",
"pages/search-result/search-result",
"pages/event-detail/event-detail"
"pages/event-detail/event-detail",
"pages/out/out"
],
"window": {
......
app.wxss
......@@ -29,3 +29,14 @@
border-radius: 10rpx;
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 @@
bottom: 15rpx;
left: 0;
padding: 5rpx 10rpx;
border-radius: 5rpx;
}
.r .time{
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({
toUrl(e){
var _url=e.currentTarget.dataset.url
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
import * as echarts from "../ec-canvas/echarts"
const moment = require('../../utils/moment.min.js')
const app = getApp()
Component({
observers: {
'data,timeType': function (data,timeType) {
if (data) {
this.draw()
}
}
},
lifetimes: {
attached: function () {
this.echartsComponnet = this.selectComponent('#trends')
},
},
/**
* 组件的属性列表
*/
properties: {
list: Object
data: Object,
timeType: String
},
/**
......@@ -15,90 +29,182 @@ Component({
*/
data: {
ec: {
onInit: initChart
llazyLoadazy: true
},
isDev:app.globalData.isDev
isDev:app.globalData.isDev,
},
/**
* 组件的方法列表
*/
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) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
function getOption(list,times){
let articleCountList = list.map(myFunction1)
let posCountList = list.map(myFunction2)
let neuCountList = list.map(myFunction3)
let negCountList = list.map(myFunction4)
let timeList = list.map(myFunction5)
var option = {
legend: {
icon: "circle",
itemHeight: 10,
itemWidth: 10,
data: ['全部', '正', '中', '负'],
selected: {
'全部':true,
'正':false,
'中':false,
'负':false
},
left: 10,
top: 10
},
tooltip: {
trigger: 'axis'
},
legend: {},
xAxis: {
type: 'category',
data: timeList,
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// axisLabel:{
// formatter (val) {
// return moment(Number(val)).format('YYYY-MM-DD')
// }
// },
axisTick:{
length:5
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
type: 'value'
},
grid: {
left: '3%',
right: '10%',
bottom: '10%',
containLabel: true
},
series: [
{
name: 'Highest',
name: '全部',
data: articleCountList,
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
smooth: true,
markLine: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
{ 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: 'average', name: 'Avg' }]
data: [
{ type: 'max', name: '峰值' },
{ type: 'average', name: '均值' }
]
}
},
{
name: 'Lowest',
name: '中',
data: neuCountList,
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
},
smooth: true,
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
{ type: 'max', name: '峰值' },
{ type: 'average', name: '均值' }
]
}
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
name: '负',
data: negCountList,
type: 'line',
smooth: true,
markLine: {
data: [
{ type: 'max', name: '峰值' },
{ type: 'average', name: '均值' }
]
}
}
},
]
};
chart.setOption(option);
return chart;
return option;
}
function getList(data,timeType){
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({
venation:[],
overview:[],
detail:[],
lineHour:[],
line:[],
hasCollect:false,
showDetail: true,
starMap:[
......@@ -20,7 +20,9 @@ Page({
{level:3,name:"一般"},
{level:4,name:"较大"},
{level:5,name:"重大"}
]
],
timeType:['小时','天'],
timeIndex:0
},
/**
......@@ -38,7 +40,7 @@ Page({
//基本信息
this.getDetail();
//危机趋势
this.getLineHour();
this.getLine();
},
getVenation(){
http.getRequest('/events/'+this.data.eventId+'/venation').then(res=>{
......@@ -83,11 +85,11 @@ Page({
})
});
},
getLineHour(){
getLine(){
http.getRequest('/events/'+this.data.eventId+'/spread/line').then(res=>{
if(res.data.success){
this.setData({
lineHour: res.data.data.lineHour
line: res.data.data
})
}
}).catch(() => {
......
pages/event-detail/event-detail.json
{
"usingComponents": {
"top": "/components/top/top",
"grade": "/components/grade/grade",
"pie": "/components/pie/pie",
"trends": "/components/trends/trends",
......
pages/event-detail/event-detail.wxml
<!--pages/event-detail/event-detail.wxml-->
<import src="../../templates/top" />
<scroll-view scroll-y="true" class="container">
<!-- 头部背景 -->
<top></top>
<!-- 顶部背景色 -->
<template is="top"></template>
<!-- 事件信息 -->
<view class="event-center">
......@@ -14,6 +16,7 @@
<view class="desc">{{detail.introduction}}</view>
</view>
</view>
<view class="event-bottom">
<view class="event-tag">
<view class="brand">
涉事品牌：{{detail.priBrand}}
......@@ -21,6 +24,7 @@
<view class="crisis">
危机类型：{{detail.priCrisisTags}}
</view>
</view>
<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.png" lazy-load="true" bindtap="collect" data-id="{{detail.id}}" wx:else></image>
......@@ -41,7 +45,7 @@
<text>{{overview.crisisLevelZh}}风险</text>
</view>
<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.png" lazy-load="true"></image></view>
</block>
......@@ -100,7 +104,7 @@
<!-- 趋势 -->
<view class="trend-container">
<view class="moudle-title">危机趋势图</view>
<trends list="{{lineHour}}"></trends>
<trends data="{{line}}" timeType="Day"></trends>
</view>
......
pages/event-detail/event-detail.wxss
......@@ -50,20 +50,33 @@ page{
overflow: hidden;
margin-top: 20rpx;
}
.event-center .event-tag{
.event-bottom{
position: relative;
display: flex;
justify-content: space-around;
height: 100rpx;
color: #666;
font-size: 28rpx;
line-height: 100rpx;
padding: 0 30rpx;
}
.event-center .event-tag .brand{
margin-right: 20rpx;
.event-bottom .event-tag{
display: flex;
font-size: 26rpx;
color: #666;
}
.event-center .event-tag .star image{
width: 30rpx;
height: 30rpx;
.event-bottom .event-tag .brand{
margin-right: 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{
color:#999
}
/* 危机趋势 */
.trend-container{
height: 550rpx;
/* 脉络 */
.venation-container{
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 5px 5px #e8e8e8;
margin-top: 30rpx;
}
/* 脉络 */
.venation-container{
/* 危机趋势 */
.trend-container{
height: 550rpx;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 5px 5px #e8e8e8;
margin-top: 30rpx;
}
pages/event-detail/venations/venations.js
......@@ -25,7 +25,7 @@ Component({
// console.log(_url)
wx.navigateTo({
// url: _url
url: '/components/out/out?url='+_url
url: '/pages/out/out?url='+_url
})
},
// 展示图片
......
pages/index/index.js
......@@ -123,7 +123,7 @@ Page({
var _url=e.currentTarget.dataset.url
console.log(_url)
wx.navigateTo({
url: '/components/out/out?url='+_url
url: '/pages/out/out?url='+_url
})
}
})
pages/index/index.json
{
"usingComponents": {
"top": "/components/top/top"
},
"enablePullDownRefresh": true,
"backgroundColor": "#025FEA",
......
pages/index/index.wxml
<!--index.wxml-->
<import src="../../templates/top" />
<view class="container">
<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}}">
......
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": {}
}
\ 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>
\ 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": {
"top": "/components/top/top"
}
}
\ No newline at end of file
pages/usercenter/usercenter.wxml
<!--pages/usercenter/usercenter.wxml-->
<import src="../../templates/top" />
<view class="usercenter">
<!-- 头部背景 -->
<top/>
<!-- 顶部背景色 -->
<template is="top"></template>
<!-- 用户信息 -->
<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 => {
}
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