Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
< template >
< div >
< div ref = "ContinuousLine" style = "width: 100%; height: 750px" / >
< / 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 ContinuousLine = ref ( ) // 使用ref创建虚拟DOM引用,使用时用main.value
watch ( chgContent , ( newValue ) => {
console . log ( 'watch 已触发' , newValue )
init ( )
} )
const init = ( ) => {
const dateStr = chgContent . value . map ( x => x . dateStr )
// 最高空间板
const brokenSlabCount = chgContent . value . map ( x => x . brokenSlabCount )
// 二板数量
const secondLimitUpCount = chgContent . value . map ( x => x . secondLimitUpCount )
// 三板数量
const thirdLimitUpCount = chgContent . value . map ( x => x . thirdLimitUpCount )
const myChart = echarts . init ( ContinuousLine . value )
// 连板总数
const continuous = chgContent . value . map ( x => x . continuous )
// 指定图表的配置项和数据
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' ,
data : dateStr
}
] ,
yAxis : [
{
type : 'value'
}
] ,
series : [
{
name : '炸板数量' ,
type : 'line' ,
smooth : true ,
lineStyle : {
width : 1.5
} ,
data : brokenSlabCount
} ,
{
name : '二板数量' ,
type : 'line' ,
smooth : true ,
// yAxisIndex: 1,
lineStyle : {
width : 1
} ,
data : secondLimitUpCount
} ,
{
name : '三板数量' ,
type : 'line' ,
smooth : true ,
// yAxisIndex: 1,
lineStyle : {
width : 1
} ,
data : thirdLimitUpCount
} ,
{
name : '连板总数' ,
type : 'line' ,
smooth : true ,
// yAxisIndex: 1,
lineStyle : {
width : 1
} ,
emphasis : {
focus : 'series'
} ,
data : continuous
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart . setOption ( option )
}
< / script >
< style scoped lang = "scss" >
< / style >