<template>
<view class="content">
<!-- #ifdef APP-PLUS || H5 -->
<view class="top-Section">
<view class="title">{{title}}</view>
<view class="top-Section-right">
<view class="right-item">
<view class="right-item-point" :style="`background-color: ${fuzhuColor};`"></view>
<view class="right-item-title">认购</view>
</view>
<view class="right-item">
<view class="right-item-point" :style="`background-color: ${themeColor};`"></view>
<view class="right-item-title">签约</view>
</view>
</view>
</view>
<view class="top-Section-right">
<!-- <view class="right-item">
<view class="right-item-point" :style="`background-color: ${fuzhuColor};`"></view>
<view class="right-item-title">认购</view>
</view>
<view class="right-item">
<view class="right-item-point" :style="`background-color: ${themeColor};`"></view>
<view class="right-item-title">签约</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,
},
data() {
return {
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,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLabel: { //坐标轴刻度标签的相关设置。
margin: 10,
textStyle: {
color: '#616F88',
fontFamily: 'Verdana',
fontSize: 10,
opacity: 0.5
},
},
axisTick: { //坐标轴刻度相关设置。
show: false,
},
axisLine: { //坐标轴轴线相关设置
show: false,
lineStyle: {
color: '',
opacity: 1
}
},
},
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() {
this.option.series[1].data = this.data1 || []
this.option.series[0].data = this.data2 || []
this.option.xAxis.data = this.dataList || []
if (this.data2.length == 1) {
this.option.xAxis.axisLine.show = true
this.option.xAxis.axisLine.lineStyle.color = this.themeColor50
}
else {
this.option.xAxis.axisLine.show = false
}
},
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
this.option.xAxis.axisLine.lineStyle.color = this.themeColor50
}
},
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;
align-items: center;
margin-bottom: 10rpx;
.title {
font-size: 32rpx;
font-weight: bold;
color: #383838;
}
}
.top-Section-right {
display: flex;
align-items: center;
.right-item {
display: flex;
align-items: center;
margin-left: 30rpx;
.right-item-point {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
}
.right-item-title {
margin-left: 10rpx;
font-size: 24rpx;
font-family: Verdana, Verdana-Regular;
font-weight: 400;
text-align: right;
color: #546074;
}
}
}
.echarts {
width: 100%;
margin-top: 0;
height: 350rpx;
}
}
</style>