Você não pode selecionar mais de 25 tópicos
Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
< template >
< div >
< div ref = "UpLowLine" style = "width: 100%; height: 600px" / >
< / div >
< / template >
< script setup lang = "ts" >
import { ref , defineProps , toRef , watch } from 'vue'
// 按需引入 echarts
import * as echarts from 'echarts'
const props = defineProps ( {
chgContent : {
type : Array ,
default ( ) {
return [ ]
}
} ,
chartType : {
type : String ,
default : 'uplow'
}
} )
const chgContent = toRef ( props , 'chgContent' )
const UpLowLine = ref ( ) // 使用ref创建虚拟DOM引用,使用时用main.value
watch ( chgContent , ( newValue ) => {
console . log ( 'watch 已触发' , newValue )
init ( )
} )
const init = ( ) => {
const dateStr = chgContent . value . map ( x => x . dateStr )
// 首板数量
const firstLimitUpCount = chgContent . value . map ( x => x . firstLimitUpCount )
// 最高空间板
const maxLimitUpDay = chgContent . value . map ( x => x . maxLimitUpDay )
// 炸板数量
const brokenSlabCount = chgContent . value . map ( x => x . brokenSlabCount )
// 连板总数
const continuous = chgContent . value . map ( x => x . continuous )
const myChart = echarts . init ( UpLowLine . value )
// 指定图表的配置项和数据
const option = {
title : {
text : '空间板、炸板、连板' ,
left : 'center'
} ,
grid : {
bottom : 80
} ,
toolbox : {
feature : {
dataZoom : {
yAxisIndex : 'none'
} ,
restore : { } ,
saveAsImage : { }
}
} ,
tooltip : {
trigger : 'axis' ,
axisPointer : {
type : 'cross' ,
animation : false ,
label : {
backgroundColor : '#505765'
}
}
} ,
legend : {
data : [ '最高空间板' , '炸板数量' , '连板总数' , '首板数量' ] ,
left : 'center' ,
top : '30px'
} ,
dataZoom : [
{
show : true ,
realtime : true ,
start : 0 ,
end : 100
} ,
{
type : 'inside' ,
realtime : true ,
start : 0 ,
end : 100
}
] ,
xAxis : [
{
type : 'category' ,
boundaryGap : false ,
axisLine : { onZero : false } ,
data : dateStr
}
] ,
yAxis : [
{
type : 'value'
}
] ,
series : [
{
name : '最高空间板' ,
type : 'line' ,
smooth : true ,
lineStyle : {
width : 1.5
} ,
emphasis : {
focus : 'series'
} ,
data : maxLimitUpDay
} ,
{
name : '炸板数量' ,
type : 'line' ,
smooth : true ,
// yAxisIndex: 1,
lineStyle : {
width : 1
} ,
emphasis : {
focus : 'series'
} ,
data : brokenSlabCount
} ,
{
name : '连板总数' ,
type : 'line' ,
smooth : true ,
// yAxisIndex: 1,
lineStyle : {
width : 1
} ,
emphasis : {
focus : 'series'
} ,
data : continuous
} ,
{
name : '首板数量' ,
type : 'line' ,
smooth : true ,
// yAxisIndex: 1,
lineStyle : {
width : 1
} ,
data : firstLimitUpCount
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart . setOption ( option )
}
< / script >
< style scoped lang = "scss" >
< / style >