|
|
@ -1,112 +1,43 @@ |
|
|
// package/subSystem/subSystem.js
|
|
|
// package/subSystem/subSystem.js
|
|
|
import * as echarts from 'echarts' // 从 npm 引入 echarts
|
|
|
import * as echarts from '../components/ec-canvas/echarts'; |
|
|
let chart = null; |
|
|
let chart = null; |
|
|
|
|
|
|
|
|
function initChart(canvas, width, height, dpr) { |
|
|
function initChart(canvas, width, height, dpr) { |
|
|
chart = echarts.init(canvas, null, { |
|
|
const chart = echarts.init(canvas, null, { |
|
|
width: width, |
|
|
width: 300, |
|
|
height: height, |
|
|
height: 300, |
|
|
devicePixelRatio: dpr // new
|
|
|
devicePixelRatio: dpr // new
|
|
|
}); |
|
|
}); |
|
|
canvas.setChart(chart); |
|
|
canvas.setChart(chart); |
|
|
|
|
|
|
|
|
var option = { |
|
|
var option = { |
|
|
tooltip: { |
|
|
backgroundColor: "#ffffff", |
|
|
trigger: 'axis', |
|
|
series: [{ |
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
|
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
|
|
|
}, |
|
|
|
|
|
confine: true |
|
|
|
|
|
}, |
|
|
|
|
|
legend: { |
|
|
|
|
|
data: ['热度', '正面', '负面'] |
|
|
|
|
|
}, |
|
|
|
|
|
grid: { |
|
|
|
|
|
left: 20, |
|
|
|
|
|
right: 20, |
|
|
|
|
|
bottom: 15, |
|
|
|
|
|
top: 40, |
|
|
|
|
|
containLabel: true |
|
|
|
|
|
}, |
|
|
|
|
|
xAxis: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'value', |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: '#999' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
color: '#666' |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
yAxis: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'category', |
|
|
|
|
|
axisTick: { show: false }, |
|
|
|
|
|
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'], |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: '#999' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
color: '#666' |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
name: '热度', |
|
|
|
|
|
type: 'bar', |
|
|
|
|
|
label: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
position: 'inside' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
data: [300, 270, 340, 344, 300, 320, 310], |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
// emphasis: {
|
|
|
|
|
|
// color: '#37a2da'
|
|
|
|
|
|
// }
|
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: '正面', |
|
|
|
|
|
type: 'bar', |
|
|
|
|
|
stack: '总量', |
|
|
|
|
|
label: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
show: true |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
data: [120, 102, 141, 174, 190, 250, 220], |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
// emphasis: {
|
|
|
|
|
|
// color: '#32c5e9'
|
|
|
|
|
|
// }
|
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: '负面', |
|
|
|
|
|
type: 'bar', |
|
|
|
|
|
stack: '总量', |
|
|
|
|
|
label: { |
|
|
label: { |
|
|
normal: { |
|
|
normal: { |
|
|
show: true, |
|
|
fontSize: 14 |
|
|
position: 'left' |
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
data: [-20, -32, -21, -34, -90, -130, -110], |
|
|
type: 'pie', |
|
|
itemStyle: { |
|
|
center: ['50%', '50%'], |
|
|
// emphasis: {
|
|
|
radius: ['20%', '40%'], |
|
|
// color: '#67e0e3'
|
|
|
data: [{ |
|
|
// }
|
|
|
value: 55, |
|
|
} |
|
|
name: '北京' |
|
|
} |
|
|
}, { |
|
|
] |
|
|
value: 20, |
|
|
|
|
|
name: '武汉' |
|
|
|
|
|
}, { |
|
|
|
|
|
value: 10, |
|
|
|
|
|
name: '杭州' |
|
|
|
|
|
}, { |
|
|
|
|
|
value: 20, |
|
|
|
|
|
name: '广州' |
|
|
|
|
|
}, { |
|
|
|
|
|
value: 38, |
|
|
|
|
|
name: '上海' |
|
|
|
|
|
}] |
|
|
|
|
|
}] |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
chart.setOption(option); |
|
|
chart.setOption(option); |
|
|
@ -118,7 +49,50 @@ Page({ |
|
|
* 页面的初始数据 |
|
|
* 页面的初始数据 |
|
|
*/ |
|
|
*/ |
|
|
data: { |
|
|
data: { |
|
|
|
|
|
ec: { |
|
|
|
|
|
onInit: initChart |
|
|
|
|
|
}, |
|
|
|
|
|
date: '', |
|
|
|
|
|
show: true, |
|
|
|
|
|
selectedDate: new Date(),// 设置默认选中的日期为当前日期
|
|
|
|
|
|
formatter(day) { |
|
|
|
|
|
console.log('xxasaasas',day) |
|
|
|
|
|
const month = day.date.getMonth() + 1; |
|
|
|
|
|
const date = day.date.getDate(); |
|
|
|
|
|
const style = {}; |
|
|
|
|
|
if (month === 10) { |
|
|
|
|
|
if (date === 1) { |
|
|
|
|
|
day.bottomInfo = '.'; |
|
|
|
|
|
day.className='dayClass' |
|
|
|
|
|
style.backgroundColor = 'red'; |
|
|
|
|
|
// document.getElementsByClassName('van-calendar__bottom-info')
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (day.type === 'start') { |
|
|
|
|
|
day.bottomInfo = '入住'; |
|
|
|
|
|
} else if (day.type === 'end') { |
|
|
|
|
|
day.bottomInfo = '离店'; |
|
|
|
|
|
} |
|
|
|
|
|
day.style = style; |
|
|
|
|
|
console.log('day111',day) |
|
|
|
|
|
return day; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
onDisplay() { |
|
|
|
|
|
this.setData({ show: true }); |
|
|
|
|
|
}, |
|
|
|
|
|
onClose() { |
|
|
|
|
|
this.setData({ show: false }); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
onConfirm(event) { |
|
|
|
|
|
this.setData({ |
|
|
|
|
|
show: false, |
|
|
|
|
|
date: this.formatDate(event.detail), |
|
|
|
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
@ -129,6 +103,23 @@ Page({ |
|
|
title: options.key, |
|
|
title: options.key, |
|
|
}); |
|
|
}); |
|
|
// 其他渲染逻辑
|
|
|
// 其他渲染逻辑
|
|
|
|
|
|
// 创建一个 Date 对象来获取当前日期
|
|
|
|
|
|
const currentDate = new Date(); |
|
|
|
|
|
// 获取当前年份
|
|
|
|
|
|
const currentYear = currentDate.getFullYear(); |
|
|
|
|
|
// 获取当前月份（注意，月份是从 0 到 11 表示，所以需要加 1）
|
|
|
|
|
|
const currentMonth = currentDate.getMonth() + 1; |
|
|
|
|
|
// 获取当前月份的第一天和最后一天
|
|
|
|
|
|
const nextMonth = new Date().getMonth() + 1; |
|
|
|
|
|
const firstDay = new Date().setDate(1); |
|
|
|
|
|
const lastDay = new Date().setMonth(nextMonth,1) - 86400000; |
|
|
|
|
|
// 更新数据，将年份和月份传递给 WXML 页面
|
|
|
|
|
|
this.setData({ |
|
|
|
|
|
currentYear: currentYear, |
|
|
|
|
|
currentMonth: currentMonth, |
|
|
|
|
|
lastDay:lastDay, |
|
|
|
|
|
firstDay:firstDay |
|
|
|
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
|
zhaobing’
2 years ago