<template>
<view class="content">
<!-- #ifdef APP-PLUS || H5 -->
<view class="top-Section">
<view class="title">{{title}}</view>
<view class="rightBtn" @click="yesterdayCompare" v-if="isShowYesterDay">
<view class="rightName">昨日环比</view>
<view class="rightIcon" :style="`border-color: ${fuzhuColor};`" v-if="isCompare"></view>
<view class="rightIcon" style="background-color: #F4F7F7; border-color: #F4F7F7;" v-else></view>
</view>
</view>
<view v-if="themeColor!=null" @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" ref="chartId"
:id="chartId" class="echarts"></view>
<!-- #endif -->
</view>
</template>
<script>
import echarts from '../../static/echarts.js'
export default {
props: {
themeColor: String,
fuzhuColor: String,
themeColor50: String,
themeColor25: String,
fuzhuColor50: String,
chartId: String,
title: String,
dataList: Array,
data1: Array,
data2: Array,
isShowYesterDay: {
type: Boolean,
default: false
},
},
data() {
return {
// dataList: [],
// data1: [],
// data2: [],
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#F1F5F9',
// color: '#3CD9D9',
type: 'dotted',
width: 2
},
label: {
backgroundColor: '#6a7985'
},
},
extraCssText: 'z-index:50'
},
grid: {
left: '2%',
right: '5%',
bottom: 0,
top: '10%',
padding: 0,
containLabel: true,
},
// dataZoom: {
// type: 'inside',
// start: 0,
// end: 30,
// zoomLock: true,
// },
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLabel: { //坐标轴刻度标签的相关设置。
margin: 10,
textStyle: {
color: '#616F88',
fontFamily: 'Verdana',
fontSize: 10
},
},
axisTick: { //坐标轴刻度相关设置。
show: false,
},
axisLine: { //坐标轴轴线相关设置
show: false
},
},
yAxis: {
// show: false,
type: 'value',
splitNumber: 4,
boundaryGap: false,
axisTick: {
show: false
},
axisLine: { //坐标轴轴线相关设置
// show: false
lineStyle: {
color: '#707070',
opacity: 0
}
},
minInterval: 1,
splitLine: {
show: false
}
},
series: [{
name: '昨日',
type: 'line',
// stack: '总量',
symbol: 'circle',
symbolSize: 6,
itemStyle: {
opacity: 0,
normal: {
borderRadius: 3,
color: this.fuzhuColor,
borderWidth: 2,
borderColor: '#FFF'
},
},
areaStyle: {
color: ''
},
smooth: true,
lineStyle: {
color: ''
},
data: []
},
{
name: '当前',
type: 'line',
// stack: '总量',
symbol: 'circle',
symbolSize: 6,
itemStyle: {
opacity: 0,
normal: {
borderRadius: 3,
color: '',
borderWidth: 2,
borderColor: '#FFF'
},
},
areaStyle: {
// color: '#56CBCB'
color: ''
},
smooth: true,
lineStyle: {
// color: '#fff',
// type: 'dotted'
},
data: [],
}
]
},
isCompare: false
}
},
methods: {
getDataAction() {
// var data1 = []
// var data2 = []
// var dataList = []
// for (var i = 0; i < 24; i++) {
// var num1 = Math.ceil(Math.random() * 100)
// var num2 = Math.ceil(Math.random() * 100)
// data1.push(num1)
// data2.push(num2)
// dataList.push(i)
// }
// if (this.dataList.length <= 10) {
// this.option.dataZoom.end = 100
// } else if (this.dataList.length > 10 && this.dataList.length <= 20) {
// this.option.dataZoom.end = 70
// } else if (this.dataList.length > 20 && this.dataList.length <= 30) {
// this.option.dataZoom.end = 20
// } else if (this.dataList.length > 30 && this.dataList.length <= 40) {
// this.option.dataZoom.end = 15
// } else {
// this.option.dataZoom.end = 10
// }
this.option.series[1].data = this.data1 || []
if (this.isCompare) {
this.option.series[0].data = this.data2
} else {
this.option.series[0].data = []
}
this.option.xAxis.data = this.dataList || []
// // console.log('数据刷新', this.option)
// console.log('数据刷新Double', this.option)
},
onViewClick(options) {
// console.log(options)
},
reloadColor() {
// console.log('what???:', this.option.series)
this.option.series[1].areaStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: this.themeColor
}, {
offset: 1,
color: this.themeColor25
}])
this.option.series[0].areaStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: this.fuzhuColor50
}, {
offset: 1,
color: '#ffffff'
}])
this.option.tooltip.axisPointer.lineStyle.color = this.themeColor
this.option.series[0].lineStyle.color = this.fuzhuColor
this.option.series[1].itemStyle.normal.color = this.themeColor
this.option.series[0].itemStyle.normal.color = this.fuzhuColor
},
yesterdayCompare() {
this.isCompare = !this.isCompare
if (this.isCompare) {
this.option.series[0].data = this.data2
} else {
this.option.series[0].data = []
}
}
},
watch: {
chartId: {
handler(e) {
// // console.log('走没走！！！！', e)
this.getDataAction()
},
immediate: true
},
themeColor: {
handler(e) {
// console.log('走没走！！！！', e)
this.reloadColor()
},
immediate: true
},
data2: {
handler(e) {
this.getDataAction()
},
immediate: true
}
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
this.initAction()
},
methods: {
initAction() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
initEcharts() {
// console.log("initEcharts -> this.$refs", this.$refs.chartId.$el.id)
myChart = echarts.init(document.getElementById(this.$refs.chartId.$el.id))
// 观测更新的数据在 view 层可以直接访问到
if (myChart) {
myChart.clear()
myChart.setOption(this.option)
}
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
if (myChart) {
myChart.clear()
myChart.setOption(newValue)
}
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: 100%;
// background-color: #FFFFFF;
overflow: hidden;
margin-bottom: 80rpx;
.top-Section {
padding: 0 20rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
font-family: Verdana;
.title {
font-size: 32rpx;
font-weight: bold;
color: #383838;
}
.rightBtn {
font-size: 24rpx;
color: #546074;
margin-top: 5rpx;
display: flex;
flex-direction: row;
justify-content: flex-end;
.rightName {
margin-right: 12rpx;
margin-top: 5rpx;
}
.rightIcon {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
border: 10rpx solid;
}
}
}
.echarts {
width: 100%;
margin-top: 0;
height: 350rpx;
}
}
</style>