Skip to content

brandEventLibraryMiniProgram
brandEventLibraryMiniProgram
Commit cef8e82d by LinChengbiao
Options

首页完成(除了图表)

parent 53b72ada
Showing with 606 additions and 11 deletions
.wepycache 0 → 100644
{"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\wepy.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-async-function\\index.js":1523427808000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-redux\\lib\\index.js":1522738267000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\index.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\index.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-promise\\lib\\index.js":1458072063000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\app.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\page.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\component.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\event.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\base.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\util.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\mixin.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-async-function\\global.js":1517302333000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\promise-polyfill\\promise.js":1511627065000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\regenerator-runtime\\runtime.js":1493390741000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-redux\\lib\\connect\\index.js":1525770681000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-redux\\lib\\store.js":1522738267000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy-redux\\lib\\helpers\\index.js":1522738268000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\combineActions.js":1532566050000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\createAction.js":1532566050000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\createActions.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\createCurriedAction.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\handleAction.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\handleActions.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\createStore.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\combineReducers.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\bindActionCreators.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\applyMiddleware.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\compose.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux\\lib\\utils\\warning.js":1499904787000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\flux-standard-action\\lib\\index.js":1454443066000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\wepy\\lib\\native.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\invariant\\browser.js":1520965460000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isFunction.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isSymbol.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isEmpty.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\toString.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isString.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\constants.js":1532566050000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\identity.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isNull.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isPlainObject.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isArray.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isNil.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\getLastElement.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\camelCase.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\arrayToObject.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\flattenActionMap.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\unflattenActionCreators.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.curry\\index.js":1471109591000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isUndefined.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\reduce-reducers\\dist\\index.js":1536657658718,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\isMap.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\ownKeys.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\flattenReducerMap.js":1532566051000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\isPlainObject.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\symbol-observable\\lib\\index.js":1516988507000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.isplainobject\\index.js":1435677344000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.camelcase\\index.js":1471109624000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\flattenWhenNode.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\redux-actions\\lib\\utils\\hasGeneratorInterface.js":1532566052000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_baseGetTag.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_getPrototype.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\isObjectLike.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\symbol-observable\\lib\\ponyfill.js":1516988507000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash._basefor\\index.js":1452676959000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.isarguments\\index.js":1471109416000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.keysin\\index.js":1432605162000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_Symbol.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_getRawTag.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_objectToString.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_overArg.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash.isarray\\index.js":1435677344000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_root.js":499162500000,"E:\\workspace\\brandEventLibraryMiniProgram\\node_modules\\lodash\\_freeGlobal.js":499162500000}
\ No newline at end of file
README.md
...@@ -61,13 +61,13 @@ ...@@ -61,13 +61,13 @@
* **编译坑点** * **编译坑点**
* 只有 `src` 中的内容会被编译进 `dist` * 只有 `src` 中的内容会被编译进 `dist`
* `src` 中文件被**删除**、**重命名**，`dist` 中文件不会发生改变，而是生成新文件(这种情况经常导致修改的东西不生效，因为它使用的是旧文件，关闭 `微信web开发者工具` ，删除 `dist` 目录，重新 `npm run dev` 编译一次就好了) * `src` 中文件被**删除**、**重命名**，`dist` 中文件不会发生改变，而是生成新文件(这种情况经常导致修改的东西不生效，因为它使用的是旧文件)
* 例子： `src` 下放入图片 `a.jpg` , 编译后 `dist` 目录下拷贝(生成) `a.jpg`，将 `src/a.jpg` 改为 `src/b.jpg` 后， `dist` 目录下同时有 `a.jpg` 和 `b.jpg` * 例子： `src` 下放入图片 `a.jpg` , 编译后 `dist` 目录下拷贝(生成) `a.jpg`，将 `src/a.jpg` 改为 `src/b.jpg` 后， `dist` 目录下同时有 `a.jpg` 和 `b.jpg`
* 基于以上问题，为了使发布的小程序更干净，提交前需要删除 `dist` 进行一次重新编译。 * 这个坑点常常会导致一些莫名其妙的bug，解决方法： 先 `npmr run clean` 删除 `dist` (也可以手动删除，但是需要关闭开发工具)，然后重新 `npm run dev` 生成新的 `dist`。
* 遇到不明bug也可尝试删除 `dist` 重新编译，然后你会神奇的发现bug消失了。 * 提交代码之前需要 `npm run build` 一次。
* **真机调试坑点** * **真机调试坑点**
* 如果发现某一个元素内文字一直是首行缩进(非 text-indent 情况)可以尝试把元素内的内容写成一行： * 如果发现某一个元素内文字一直是首行缩进(非 `text-indent` 情况)可以尝试把元素内的内容写成一行：
![prtsc_001.png](./README_STATIC/prtsc_002.png) ![prtsc_001.png](./README_STATIC/prtsc_002.png)
![prtsc_001.png](./README_STATIC/prtsc_003.png) ![prtsc_001.png](./README_STATIC/prtsc_003.png)
...@@ -78,3 +78,4 @@ ...@@ -78,3 +78,4 @@
* [wepy 官网](https://tencent.github.io/wepy/) * [wepy 官网](https://tencent.github.io/wepy/)
* [github 项目](https://github.com/Tencent/wepy) * [github 项目](https://github.com/Tencent/wepy)
* [微信小程序组件化开发框架WePY官方文档](https://tencent.github.io/wepy/document.html#/) * [微信小程序组件化开发框架WePY官方文档](https://tencent.github.io/wepy/document.html#/)
* [在wepy框架中使用echarts](https://blog.csdn.net/juzipidemimi/article/details/81807110)
package.json
...@@ -17,13 +17,15 @@ ...@@ -17,13 +17,15 @@
"author": "LinChengbiao <1072907338@qq.com>", "author": "LinChengbiao <1072907338@qq.com>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"echarts": "^4.1.0",
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-actions": "^2.2.1", "redux-actions": "^2.2.1",
"redux-promise": "^0.5.3", "redux-promise": "^0.5.3",
"wepy": "^1.6.0", "wepy": "^1.6.0",
"wepy-async-function": "^1.4.6", "wepy-async-function": "^1.4.6",
"wepy-com-toast": "^1.0.2", "wepy-com-toast": "^1.0.2",
"wepy-redux": "^1.5.3" "wepy-redux": "^1.5.3",
"wepy-web": "^1.6.0"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^7.2.1", "babel-eslint": "^7.2.1",
...@@ -42,6 +44,7 @@ ...@@ -42,6 +44,7 @@
"wepy-compiler-babel": "^1.5.1", "wepy-compiler-babel": "^1.5.1",
"wepy-compiler-less": "^1.3.12", "wepy-compiler-less": "^1.3.12",
"wepy-compiler-sass": "^1.3.12", "wepy-compiler-sass": "^1.3.12",
"wepy-eslint": "^1.5.3" "wepy-eslint": "^1.5.3",
"wepy-plugin-uglifyjs": "^1.3.7"
} }
} }
project.config.json
...@@ -5,11 +5,13 @@ ...@@ -5,11 +5,13 @@
"es6": false, "es6": false,
"postcss": false, "postcss": false,
"minified": false, "minified": false,
"newFeature": true "newFeature": true,
"nodeModules": false
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"appid": "wx7d6fd5c69f342842", "appid": "wx7d6fd5c69f342842",
"projectname": "brand-event-library-mini-program", "projectname": "brand-event-library-mini-program",
"miniprogramRoot": "./dist", "miniprogramRoot": "./dist",
"libVersion": "2.3.0",
"condition": {} "condition": {}
} }
\ No newline at end of file
src/components/common/searchInput.wpy
<template> <template>
<view class="searchInputWpy"> <view class="searchInputWpy">
<input type="text" name="" value="{{searchWord}}" @input="input" /> <input type="text" name="" value="{{searchWord}}" @input="input" />
<image src="../../static/img/i_search.png" class="searchBtn" @tap="toSearch()" /> <image src="../../static/img/i_search_clean.png" class="cleanBtn" @tap="toSearch()" wx:if="{{ !!searchWord }}" />
<image src="../../static/img/i_search.png" class="searchBtn" @tap="clean()" />
</view> </view>
</template> </template>
...@@ -44,7 +45,16 @@ export default class searchInput extends wepy.component { ...@@ -44,7 +45,16 @@ export default class searchInput extends wepy.component {
border: 2rpx solid #A1AAC4; border: 2rpx solid #A1AAC4;
background-color: #F5F6FA; background-color: #F5F6FA;
padding: 0 20rpx; padding: 0 20rpx;
padding-right: 90rpx; padding-right: 140rpx;
}
.cleanBtn{
display: block;
width: 40rpx;
height: 40rpx;
position: absolute;
top: 50%;
right: 90rpx;
transform: translateY(-50%);
} }
.searchBtn{ .searchBtn{
display: block; display: block;
......
src/components/home/classificationEvent.wpy 0 → 100644
<template>
<view class="classificationEventWpy homePageModule">
<view class="title">分类事件</view>
<view class="content">
<view class="fieldName">
<view>事件占比</view>
<view>影响力均值</view>
</view>
<view class="ul">
<repeat for="{{ dataInfo }}" item="n" index="i" key="i">
<view class="li">
<view class="eventOccupyingRatio">
<view class="bar" style="width: {{ n.eventOccupyingRatio }};"></view>
<view class="value">{{ n.eventOccupyingRatio }}</view>
</view>
<view class="classificationName">{{ n.name }}</view>
<view class="meanOfInfluence">
<view class="bar" style="width: {{ n.meanOfInf / meanOfInfluenceSum * 100 }}%;"></view>
<view class="value">{{ n.meanOfInfFormat }}</view>
</view>
</view>
</repeat>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class classificationEvent extends wepy.component {
data = {
dataInfo: [
{ name: '行业竞品', eventOccupyingRatio: `${39}%`, meanOfInf: 1878, meanOfInfFormat: Math.format.thousandBitSymbol(1878) },
{ name: '战略合作', eventOccupyingRatio: `${18}%`, meanOfInf: 786, meanOfInfFormat: Math.format.thousandBitSymbol(786) },
{ name: '负面危机', eventOccupyingRatio: `${18}%`, meanOfInf: 245, meanOfInfFormat: Math.format.thousandBitSymbol(245) },
{ name: '公司形象', eventOccupyingRatio: `${9}%`, meanOfInf: 45, meanOfInfFormat: Math.format.thousandBitSymbol(45) },
{ name: '公开报道', eventOccupyingRatio: `${7}%`, meanOfInf: 34, meanOfInfFormat: Math.format.thousandBitSymbol(34) }
]
}
onLoad () {
console.log('classificationEvent')
}
methods = {}
computed = {
meanOfInfluenceSum () {
return Math.sum(...this.dataInfo.map(n => n.meanOfInf))
}
}
}
</script>
<style lang="scss" scoped>
.classificationEventWpy{
border: 1px solid #D6D7DA;
border-radius: 8rpx;
.title{
border-bottom: 1px solid #D6D7DA;
}
.content{
.fieldName{
display: flex;
justify-content: space-between;
font-size: 32rpx;
padding: 20rpx 24rpx;
}
.ul{
.li{
display: flex;
align-items: center;
margin-bottom: 30rpx;
padding: 0 24rpx;
.classificationName{
width: 140rpx;
height: 26rpx;
line-height: 26rpx;
text-align: center;
}
.eventOccupyingRatio, .meanOfInfluence{
flex: 1 1;
height: 26rpx;
position: relative;
.bar{
position: absolute;
height: 100%;
border-radius: 26rpx;
}
.value{
position: absolute;
}
}
.eventOccupyingRatio{
.bar{
background-color: #49619F;
top: 0;
right: 0;
}
.value{
left: 0;
}
}
.meanOfInfluence{
.bar{
background-color: #F46485;
top: 0;
left: 0;
}
.value{
right: 0;
}
}
}
}
}
}
</style>
src/components/home/monthlyEvent.wpy 0 → 100644
<template>
<view class="monthlyEventWpy homePageModule">
<view class="title">月度事件</view>
<view class="content">
<ecCanvas id="monthlyEventChart" canvas-id="monthlyEventChart" ec="{{ ec }}" bind:init="echartInit" />
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import echarts from '@/static/plugs/ec-canvas/echarts.js'
import { getOptions } from './monthlyEventOptions.js'
export default class monthlyEvent extends wepy.component {
config = {
usingComponents: {
ecCanvas: '../../static/plugs/ec-canvas/ec-canvas'
}
}
data = {
ec: {},
myChart: null
}
onLoad () {
console.log('monthlyEvent')
}
methods = {
echartInit (e) {
console.log(e)
this.initChart(e.detail.canvas, e.detail.width, e.detail.height)
}
}
initChart (canvas, width, height) {
this.myChart = echarts.init(canvas, null, { width, height })
canvas.setChart(this.myChart)
this.drawChart()
}
drawChart () {
const option = getOptions({})
this.myChart.setOption(option)
}
}
</script>
<style lang="scss" scoped>
.monthlyEventWpy{
border: 1px solid #D6D7DA;
border-radius: 8rpx;
.title{
border-bottom: 1px solid #D6D7DA;
}
.content{
padding: 24rpx;
height: 650rpx;
}
}
</style>
src/components/home/monthlyEventOptions.js 0 → 100644
export const getOptions = (params) => {
let option = {
title: {
text: '测试下面legend的红色区域不应被裁剪',
left: 'center'
},
color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
legend: {
data: ['A', 'B', 'C'],
top: 50,
left: 'center',
backgroundColor: 'red',
z: 100
},
grid: {
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// show: false
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
// show: false
},
series: [{
name: 'A',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: 'B',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}, {
name: 'C',
type: 'line',
smooth: true,
data: [10, 30, 31, 50, 40, 20, 10]
}]
}
return option
}
src/components/home/monthlyIncrease.wpy
...@@ -25,9 +25,11 @@ export default class monthlyIncrease extends wepy.component { ...@@ -25,9 +25,11 @@ export default class monthlyIncrease extends wepy.component {
{ name: '本月新增事件', value: Math.format.thousandBitSymbol(56) } { name: '本月新增事件', value: Math.format.thousandBitSymbol(56) }
] ]
} }
onLoad () { onLoad () {
console.log('monthlyIncrease') console.log('monthlyIncrease')
} }
methods = { methods = {
showAllEvents () { showAllEvents () {
console.log('showAllEvents') console.log('showAllEvents')
......
src/components/home/propagationCycle.wpy 0 → 100644
<template>
<view class="propagationCycleWpy homePageModule">
<view class="title">传播周期</view>
<view class="content">
<repeat for="{{ dataInfo }}" item="n" index="i" key="i">
<view class="item">
<view class="progressBar">
<view class="progress" style="width: {{ n.percentage }}; background-color: {{ n.color }};"></view>
</view>
<view class="text">
<view class="left">{{ n.name }}</view>
<view class="right">
<view class="eachHour" style="color: {{ n.color }};">{{ n.eachHour }}</view>
{{ n.duration }}
</view>
</view>
</view>
</repeat>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class propagationCycle extends wepy.component {
data = {
dataInfo: [
{ name: '上升期', color: '#49619F', eachHour: `${234}条/小时`, duration: '20小时', percentage: `${80}%` },
{ name: '热议期', color: '#5978BB', eachHour: `${12}条/小时`, duration: '20小时', percentage: `${40}%` },
{ name: '衰减期', color: '#6A8FD3', eachHour: `${213}条/小时`, duration: '20小时', percentage: `${20}%` },
{ name: '长尾期', color: '#7AAAEC', eachHour: `${12}条/小时`, duration: '3天12小时', percentage: `${20}%` }
]
}
onLoad () {
console.log('propagationCycle')
}
}
</script>
<style lang="scss" scoped>
.propagationCycleWpy{
border: 1px solid #D6D7DA;
border-radius: 8rpx;
.title{
border-bottom: 1px solid #D6D7DA;
}
.content{
font-size: 32rpx;
.item{
padding: 24rpx;
.progressBar{
height: 26rpx;
margin-bottom: 22rpx;
.progress{
height: 100%;
border-radius: 26rpx;
}
}
.text{
display: flex;
justify-content: space-between;
.right{
display: flex;
.eachHour{
margin-right: 10rpx;
}
}
}
&:not(:first-child){
border-top: 1px solid #D6D7DA;
}
}
}
}
</style>
src/pages/home.wpy
...@@ -16,6 +16,15 @@ ...@@ -16,6 +16,15 @@
<!-- 月增 --> <!-- 月增 -->
<monthlyIncrease class="item" /> <monthlyIncrease class="item" />
<!-- 月度事件 -->
<monthlyEvent class="item" />
<!-- 传播周期 -->
<propagationCycle class="item" />
<!-- 分类事件 -->
<classificationEvent class="item" />
</view> </view>
</view> </view>
...@@ -28,6 +37,9 @@ import searchInput from '@/components/common/searchInput' // 搜索框 ...@@ -28,6 +37,9 @@ import searchInput from '@/components/common/searchInput' // 搜索框
import heatList from '@/components/home/heatList' // 热度榜 import heatList from '@/components/home/heatList' // 热度榜
import overview from '@/components/home/overview' // 概览 import overview from '@/components/home/overview' // 概览
import monthlyIncrease from '@/components/home/monthlyIncrease' // 月增 import monthlyIncrease from '@/components/home/monthlyIncrease' // 月增
import monthlyEvent from '@/components/home/monthlyEvent' // 月度事件
import propagationCycle from '@/components/home/propagationCycle' // 传播周期
import classificationEvent from '@/components/home/classificationEvent' // 分类事件
export default class home extends wepy.page { export default class home extends wepy.page {
components = { components = {
...@@ -35,7 +47,10 @@ export default class home extends wepy.page { ...@@ -35,7 +47,10 @@ export default class home extends wepy.page {
searchInput, searchInput,
heatList, heatList,
overview, overview,
monthlyIncrease monthlyIncrease,
monthlyEvent,
propagationCycle,
classificationEvent
} }
data = { data = {
searchWord: '' searchWord: ''
......
src/static/plugs/ec-canvas/ec-canvas.js 0 → 100644
import WxCanvas from './wx-canvas';
import * as echarts from './echarts';
let ctx;
Component({
properties: {
canvasId: {
type: String,
value: 'ec-canvas'
},
ec: {
type: Object
}
},
data: {
},
ready: function () {
if (!this.data.ec) {
console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+ 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
return;
}
if (!this.data.ec.lazyLoad) {
this.init();
}
},
methods: {
init: function (callback) {
const version = wx.version.version.split('.').map(n => parseInt(n, 10));
const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
|| (version[0] === 1 && version[1] === 9 && version[2] >= 91);
if (!isValid) {
console.error('微信基础库版本过低，需大于等于 1.9.91。'
+ '参见：https://github.com/ecomfe/echarts-for-weixin'
+ '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
return;
}
ctx = wx.createCanvasContext(this.data.canvasId, this);
const canvas = new WxCanvas(ctx, this.data.canvasId);
echarts.setCanvasCreator(() => {
return canvas;
});
var query = wx.createSelectorQuery().in(this);
query.select('.ec-canvas').boundingClientRect(res => {
if (typeof callback === 'function') {
this.chart = callback(canvas, res.width, res.height);
}
else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
this.chart = this.data.ec.onInit(canvas, res.width, res.height);
}
else {
this.triggerEvent('init', {
canvas: canvas,
width: res.width,
height: res.height
});
}
}).exec();
},
canvasToTempFilePath(opt) {
if (!opt.canvasId) {
opt.canvasId = this.data.canvasId;
}
ctx.draw(true, () => {
wx.canvasToTempFilePath(opt, this);
});
},
touchStart(e) {
if (this.chart && e.touches.length > 0) {
var touch = e.touches[0];
this.chart._zr.handler.dispatch('mousedown', {
zrX: touch.x,
zrY: touch.y
});
this.chart._zr.handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
});
}
},
touchMove(e) {
if (this.chart && e.touches.length > 0) {
var touch = e.touches[0];
this.chart._zr.handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
});
}
},
touchEnd(e) {
if (this.chart) {
const touch = e.changedTouches ? e.changedTouches[0] : {};
this.chart._zr.handler.dispatch('mouseup', {
zrX: touch.x,
zrY: touch.y
});
this.chart._zr.handler.dispatch('click', {
zrX: touch.x,
zrY: touch.y
});
}
}
}
});
src/static/plugs/ec-canvas/ec-canvas.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
src/static/plugs/ec-canvas/ec-canvas.wxml 0 → 100644
<canvas class="ec-canvas" canvas-id="{{ canvasId }}"
bindinit="init"
bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}">
</canvas>
src/static/plugs/ec-canvas/ec-canvas.wxss 0 → 100644
.ec-canvas {
width: 100%;
height: 100%;
}
src/static/plugs/ec-canvas/echarts.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/static/plugs/ec-canvas/wx-canvas.js 0 → 100644
export default class WxCanvas {
constructor(ctx, canvasId) {
this.ctx = ctx;
this.canvasId = canvasId;
this.chart = null;
// this._initCanvas(zrender, ctx);
this._initStyle(ctx);
this._initEvent();
}
getContext(contextType) {
if (contextType === '2d') {
return this.ctx;
}
}
// canvasToTempFilePath(opt) {
// if (!opt.canvasId) {
// opt.canvasId = this.canvasId;
// }
// return wx.canvasToTempFilePath(opt, this);
// }
setChart(chart) {
this.chart = chart;
}
attachEvent () {
// noop
}
detachEvent() {
// noop
}
_initCanvas(zrender, ctx) {
zrender.util.getContext = function () {
return ctx;
};
zrender.util.$override('measureText', function (text, font) {
ctx.font = font || '12px sans-serif';
return ctx.measureText(text);
});
}
_initStyle(ctx) {
var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
styles.forEach(style => {
Object.defineProperty(ctx, style, {
set: value => {
if (style !== 'fillStyle' && style !== 'strokeStyle'
|| value !== 'none' && value !== null
) {
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
}
}
});
});
ctx.createRadialGradient = () => {
return ctx.createCircularGradient(arguments);
};
}
_initEvent() {
this.event = {};
const eventNames = [{
wxName: 'touchStart',
ecName: 'mousedown'
}, {
wxName: 'touchMove',
ecName: 'mousemove'
}, {
wxName: 'touchEnd',
ecName: 'mouseup'
}, {
wxName: 'touchEnd',
ecName: 'click'
}];
eventNames.forEach(name => {
this.event[name.wxName] = e => {
const touch = e.touches[0];
this.chart._zr.handler.dispatch(name.ecName, {
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
});
};
});
}
}
wepy.config.js
...@@ -28,7 +28,7 @@ module.exports = { ...@@ -28,7 +28,7 @@ module.exports = {
outputStyle: 'compressed' outputStyle: 'compressed'
}, },
babel: { babel: {
sourceMap: true, sourceMap: false,
presets: [ presets: [
'env' 'env'
], ],
......
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