在vue项目中改变窗口大小，echarts的graphic创建的图形元素组件就会消失？
一改变窗口大小我在 graphic 里创建的 text 和 image 就会消失。在别的测试网站测的都好好的，放项目里就出现这个问题，有时我把饼图，折线图，曲线图叠加到一起时tooltip也会无法展示，但在测试时是正常的，这是哪里出问题了吗？
<template> <div :id="chartId" :class="className" :style="{ height: height, width: width }"></div>
</template>
<script>
import { watch, onMounted, toRefs, reactive, onUnmounted, computed } from 'vue'
import * as echarts from 'echarts'
export default {
name: 'bar-chart122',
props: {
chartId: {
type: String,
default: () => {
return 'bar-chart'
},
},
className: {
type: String,
default: () => {
return 'bar-chart'
},
},
height: {
type: String,
default: '100%',
},
width: {
type: String,
default: '100%',
},
seriesData: {
type: Object,
default: () => {
return {
name: '光伏',
value: 65,
data: 1,
}
},
},
},
setup(props) {
const state = reactive({
legendName: [],
myChart: null,
list: {
xAxisData: [],
seriesData: [],
},
greenC: '#00c06f',
yellowC: '#ffb624',
blueC: '#01eff3',
bgImg: null,
})
state.bgImg = new Image()
state.bgImg.src = './2_1.jpg'
const setOptions = computed(() => {
let option = {
// backgroundColor: 'rgba(0,0,0,0.5)',
title: {
rich: {
title: {
fontSize: 14,
fontWeight: 400,
color: '#fff',
padding: [0, 0, -30, 0],
},
},
x: 'center',
y: 'center',
},
graphic: {
// 添加自定义文字，图片等
elements: [
{
type: 'text',
z: 3,
style: {
text: `${props.seriesData.name}：${props.seriesData.data}`,
textAlign: 'center', // 居中对齐
fill: '#fff', // 填充色
fontSize: 16,
fontWeight: 200,
// position: [100, 100],
fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
},
left: 'center',
top: '54%',
},
{
type: 'image',
z: 3,
style: {
image: state.bgImg,
width: '83%',
height: '79%',
},
left: 'center',
top: '11%',
},
],
},
series: [
{
type: 'gauge',
radius: '65%',
z: 1,
clockwise: false, //逆时针
startAngle: -269.99,
endAngle: 90,
splitNumber: 24,
splitLine: {
show: false,
},
detail: {
// 显示详情数据
show: true,
color: '#fff',
offsetCenter: [0, -20], //水平、垂直偏移
fontSize: 18,
// formatter: (val) => [`{a|${obj.data}%}`].join(''),
formatter: () => [`{a|${props.seriesData.value}%}`].join(''),
rich: {
a: {
fontSize: 36,
// lineHeight: 102,
fontFamily: 'DINCond-Bold, DINCond',
fontWeight: 'bold',
color: '#FFFFFF',
},
},
},
// 仪表盘的线，颜色值为一个数组
axisLine: {
show: true,
lineStyle: {
width: 20,
opacity: 1,
color: [
[
props.seriesData.value / 100,
{
type: 'linear', //必须要 ,type：‘linear’，线性渐变, 径向渐变：colorStops - radial
// 渐变无法展示
x: 1, // x,y，代表圆心，数值范围 0-1；
y: 0, // r，代表半径，数值范围 0-1；
x2: 0, // offset，类似颜色线性梯度，数值范围 0-1；
y2: 1, // boolean，默认false，若最后参数为true，前四个参数将使用像素位置。
colorStops: [
{
offset: 0,
// color: '#00FFEE',
color:
props.seriesData.name == '储能'
? '#0b8abd' // lan
: props.seriesData.name == '光伏'
? '#06aa73' // lv
: '#ffb624', // chen
},
{
offset: 1,
// color: '#00FF94',
color:
props.seriesData.name == '储能'
? '#00f7ff' // lan
: props.seriesData.name == '光伏'
? '#61ff69' // lv
: '#fbff24', // chen
},
],
global: false, // 缺省为false
},
],
[1, 'rgba(255,255,255,0.1)'],
],
},
},
axisLabel: {
show: false,
},
//指针
pointer: {
show: false,
},
axisTick: {
show: true,
splitNumber: 1,
distance: -20,
lineStyle: {
// color: 'rgba(3, 72, 84, .4)',
color: 'rgba(4, 96, 112, 1)',
width: 4,
},
length: 20,
}, //刻度样式
data: [
{
value: props.seriesData.value,
},
],
},
// // 外圆线
{
type: 'pie',
radius: ['70%', '72%'],
center: ['50%', '50%'],
// hoverAnimation: false, //鼠标移入变大
clockwise: false, //逆时针
startAngle: 90, //起始角度
endAngle: -269.99,
labelLine: {
show: false,
},
label: {
position: 'center',
},
data: [
{
value: props.seriesData.value,
itemStyle: {
shadowBlur: 0,
shadowColor: '#fff',
color: 'rgba(58, 131, 102, 1)',
},
},
{
value: 100 - props.seriesData.value,
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(255,255,255,0.1)',
borderWidth: 0,
},
},
],
},
// //圆点
{
type: 'gauge',
z: 5,
clockwise: false, //逆时针
// startAngle: -269.99,
startAngle: -269.99,
endAngle: 90,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLabel: {
show: false,
},
pointer: {
icon: 'circle', // 箭头图标
length: '12%',
width: 14,
height: 14,
offsetCenter: [0, '-88.5%'], // 箭头位置
itemStyle: {
color: 'rgba(74, 234, 174, 1)', // 箭头颜色
// shadowColor: 'rgba(74, 234, 174, 1)',
// shadowBlur: 10
},
},
detail: {
show: false,
},
title: {
show: false,
},
data: [
{
value: props.seriesData.value,
},
{
value: 0,
},
],
},
],
}
return option
})
// 创建图表
const initChart = (option) => {
echarts.dispose(document.getElementById(props.chartId)) // 销毁实例
// echarts.init(document.getElementById(props.chartId)).dispose() // 销毁实例
state.myChart = echarts.init(document.getElementById(props.chartId), null, { renderer: 'svg' })
window.addEventListener('resize', () => {
state.bgImg = new Image()
state.bgImg.src = './2_1.jpg'
state.myChart.resize()
})
state.myChart.setOption(option, true)
}
onMounted(() => {
initChart(setOptions.value)
})
onUnmounted(() => {
// echarts.dispose()
state.myChart = null
})
// // 监听传值，刷新图表
watch(
[() => props.seriesData],
(newVal) => {
initChart(setOptions.value)
return newVal
},
{
deep: true,
// immediate: true,
}
)
return { ...toRefs(state), setOptions, initChart }
},
}
</script>
<style lang="scss" scoped></style>
以上是 在vue项目中改变窗口大小，echarts的graphic创建的图形元素组件就会消失？ 的全部内容， 来源链接： utcz.com/p/934924.html
