微信截图_20240202150651.png
<template>
<div :id="id" class="echarts1"></div>
</template>
<script>
import * as echarts from 'echarts'
import { copyFileSync } from 'fs'
export default {
// startVal 初始值 endVal 最终值 title 标签值
props: {
datas: {
type: [Array, Object],
default: null
},
id: {
type: String,
default: null
}
},
data() {
return {
Time1: null,
datasCopy: ''
}
},
computed: {},
watch: {
// 这是监听json值变化
datas: {
// json为监听参数名
handler: function (val, oldVal) {
// 不能用箭头函数
this.echartsFun(val)
}
}
},
beforeDestroy() {
clearInterval(this.Time1)
},
methods: {
echartsFun(val) {
this.datasCopy = val
// console.log(JSON.parse(JSON.stringify(val)))
echarts.init(document.getElementById(this.id)).dispose() // 一定要摧毁
const myChart = echarts.init(document.getElementById(this.id))
myChart.clear()
const color = ['rgba(41, 181, 246, 1)', '#00CA69']
let option = {
color: color,
grid: {
top: '25%',
left: '5%',
right: '5%',
bottom: '0',
containLabel: true // 显示范围包含坐标刻度
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.5)',
borderWidth: 0,
textStyle: {
color: '#fff'
},
axisPointer: {
type: 'shadow'
},
padding: 0,
formatter: (params, ticket) => {
let k = params[0].dataIndex
let dataCopy = this.datasCopy.dataCopy
let html = `<div class="left3ShowBox">`
html += `<div class="date">${dataCopy[k].date}</div>`
html += `<div class="fatie">总发帖量：${dataCopy[k].fatie}</div>`
html += `<div class="redu">总热度值：${dataCopy[k].redu}</div>`
html += `<div class="list">`
// ----
dataCopy[k].list.forEach((v) => {
html += `<div class="li">`
html += `<table>${v.name}</table>`
html += `<span> 【发帖：${v.redu}】</span>`
html += `</div>`
})
// ----
html += `</div>`
html += `</div>`
return html
}
},
legend: {
data: ['发帖量', '热度值'],
textStyle: {
color: '#B4B4B4'
},
top: '0%'
},
xAxis: {
type: 'category',
showMaxLabel: true, // X轴显示开头和最后一个信息
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#00c7ff'
}
},
axisLine: {
lineStyle: {
color: '#063374'
}
},
data: val.xData
},
yAxis: [
{
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#00c7ff',
width: 1,
type: 'solid'
}
},
splitLine: {
lineStyle: {
color: '#1775A1'
}
},
axisLabel: {
formatter: '{value} '
}
},
{
axisLine: {
show: false,
lineStyle: {
color: '#00c7ff',
width: 1,
type: 'solid'
}
},
splitLine: {
lineStyle: {
color: '#1775A1'
}
},
axisLabel: {
formatter: '{value} '
}
}
],
series: [
{
name: '发帖量',
type: 'line',
yAxisIndex: 0,
smooth: true,
symbolSize: 8,
zlevel: 3,
lineStyle: {
width: 2,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(43,182,247,0.9)'
},
{
offset: 1,
color: 'rgba(158,255,255,0.9)'
}
])
},
symbol: 'circle', // 数据交叉点样式
markPoint: {
label: {
color: '#20c7fd',
fontFamily: '',
fontWeight: 800,
position: 'top',
formatter: '{c}'
},
data: [
{
type: 'max',
name: '最大值',
symbolSize: 0,
symbol: 'circle',
symbolOffset: [0, -4],
label: {
color: 'rgba(158,255,255,0.9)'
}
},
{
type: 'min',
name: '最小值',
symbolSize: 0,
symbol: 'circle',
symbolOffset: [0, -4],
label: {
color: 'rgba(43,182,247,0.9)'
}
}
]
},
itemStyle: {
normal: {
color: '#C8E4FF'
}
},
data: val.yData2
},
{
name: '热度值',
type: 'bar',
data: val.yData,
barWidth: 20, // 柱子宽度
barGap: 1, // 柱子之间间距
yAxisIndex: 1,
itemStyle: {
normal: {
color: (val) => {
if (
this.datasCopy.indexMax &&
val.dataIndex === this.datasCopy.indexMax[0]
) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 185, 93, 1)'
},
{
offset: 1,
color: 'rgba(229, 58, 52, 1)'
}
])
} else if (
this.datasCopy.indexMax &&
val.dataIndex === this.datasCopy.indexMax[1]
) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 204, 0, 1)'
},
{
offset: 1,
color: 'rgba(255, 150, 0, 1)'
}
])
} else if (
this.datasCopy.indexMax &&
val.dataIndex === this.datasCopy.indexMax[2]
) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(100, 255, 255, 1)'
},
{
offset: 1,
color: 'rgba(0, 180, 180, 1)'
}
])
} else {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(158,255,255,0.9)'
},
{
offset: 1,
color: 'rgba(43,182,247,0.9)'
}
])
}
}
}
}
}
]
}
myChart.setOption(option, true) // true无数据时更新试图
}
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
width: 100%;
height: 100%;
}
::v-deep {
.left3ShowBox {
padding: 10px;
background: rgba(0, 0, 0, 0.5);
margin: 0;
.list {
margin-top: 5px;
.li {
display: flex;
> span {
font-size: 14px;
}
}
}
}
}
</style>
网友评论