目录
控制台报warning 显示图表已加载
主要代码
1、检查是否已存在图表实例,若存在删除
if(chartContainer1){
chartContainer1.removeAttribute('echarts_instance');
// 检查是否已经有图表实例在该容器上初始化
if (!chartContainer1.hasAttribute('echarts_instance')){
// 初始化 ECharts 实例
myEcharts = this.$echarts.init(chartContainer1);
myEcharts.setOption(this.optionPie)
// 在容器上设置一个标记,表示已经初始化了 ECharts 实例
chartContainer1.setAttribute('echarts_instance', 'true');
} else {
// 已经存在图表实例,可能不需要再次初始化
console.error('图表已经在该容器上初始化过。');
}
} else {
console.error('找不到图表容器,请检查容器 ID 是否正确。');
}
2、在组件销毁前清除图表
setup() {
// 在组件销毁前执行清理操作
onBeforeUnmount(() => {
if (myEcharts) {
myEcharts.dispose();
myEcharts = null;
}
if (myEcharts2) {
myEcharts2.dispose();
myEcharts2 = null;
}
});
}
总体思路:若存在图表先进行销毁在重新初始化 就可以解决。。
全部代码:
<template>
<div class="content">
<div class="bottom" id="echarts-pie1"></div>
<div class="bottom" id="echarts-pie2"></div>
</div>
</template>
<script>
// 环形图内嵌图片 (下面附带图片,需要自取。)
import pie1 from '../../../../../assets/img/pie1.png';
import pie2 from '../../../../../assets/img/pie2.png';
import { onBeforeUnmount } from 'vue';
var myEcharts
var myEcharts2
export default {
data(){
var optionList = [
{
value: 16.13,
name: '农业用水量',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(95,235,246,0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(95,235,246,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgb(95,235,246)' // 100% 处的颜色
}
]
}
}
},
{
value: 6.89,
name: '工业用水量',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgb(21,118,226)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(21,118,226,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(21,118,226,0.1)' // 100% 处的颜色
}
]
}
}
},
{
value: 9.42,
name: '生活用水量',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgb(99,193,100)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(99,193,100,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(99,193,100,0.1)' // 100% 处的颜色
}
]
}
}
},
{
value: 3.33,
name: '生态环境用水量',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 184, 0, 0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(255, 184, 0, 0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 184, 0, 1)' // 100% 处的颜色
}
]
}
}
}
]
var optionList2 = [
{
value: 16.13,
name: '芙蓉区',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(95,235,246,0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(95,235,246,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgb(95,235,246)' // 100% 处的颜色
}
]
}
}
},
{
value: 6.89,
name: '开福区',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgb(21,118,226)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(21,118,226,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(21,118,226,0.1)' // 100% 处的颜色
}
]
}
}
},
{
value: 9.42,
name: '雨花区',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgb(99,193,100)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(99,193,100,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(99,193,100,0.1)' // 100% 处的颜色
}
]
}
}
},
{
value: 9.42,
name: '长沙县',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 184, 0, 0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(255, 184, 0, 0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 184, 0, 1)' // 100% 处的颜色
}
]
}
}
},
{
value: 3.33,
name: '浏阳市',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(136, 0, 255, 0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(136, 0, 255, 0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(136, 0, 255, 1)' // 100% 处的颜色
}
]
}
}
}
]
return {
optionPie:{
tooltip: {
show:false,
trigger: 'item'
},
legend: {
top: '10%',
itemWidth: 13,
itemHeight: 6,
right: '24%',
orient: 'vertical',
textStyle: {
height: 18,
fontSize: 12,
lineHeight: 17,
rich: {
a: {
width:100,
color: '#fff' // 农业用水量的颜色
},
b: {
width:80,
textAlign:'left',
color: 'rgba(255, 219, 0, 1)' // 工业用水量的颜色
},
c: {
color: 'rgba(176, 228, 255, 1)' // 生活用水量的颜色
}
}
},
formatter: function (name) {
var dataIndex = 0;
var data = optionList;
for (var i = 0; i < data.length; i++) {
if (data[i].name === name) {
dataIndex = i;
break;
}
}
return `{a|${name}} {b|${data[dataIndex].value}亿m³} {c|${
(
(data[dataIndex].value /
optionList.reduce((acc, cur) => acc + cur.value, 0)) *
100
).toFixed(0) + '%'
}}`;
},
data: [
{
name: '农业用水量',
itemStyle: {
color: '#00FFF4'
}
},
{
name: '工业用水量',
itemStyle: {
color: '#009AFF'
}
},
{
name: '生活用水量',
itemStyle: {
color: '#00FF5F'
}
},
{
name: '生态环境用水量',
itemStyle: {
color: '#FFB800'
}
}
]
},
graphic: [
{
type: 'image',
id: 'outerImage',
left: '2%',
top: '8%',
z: 10, // 图层位置
bounding: 'raw',
style: {
image: pie2,
width: 140,
height: 101,
}
},
{
type: 'image',
id: 'innerImage',
left: '7.5%',
top: '19%',
z: 10, // 图层位置
bounding: 'raw',
style: {
image: pie1,
width: 75,
height: 75
}
},
{
type: "text", //通过不同top值可以设置上下显示
left: '13%',
top: '32%',
style: {
text: "70",
textAlign: "center",
height: 21,
fontSize: 18,
fontFamily: 'DINAlternate',
fontWeight: 'bold',
lineHeight: 21,
fill: "#F5FCFF"
}
},
{
type: "text", //通过不同top值可以设置上下显示
left: '10%',
top: '47%',
style: {
text: "总量(亿m³)",
textAlign: "center",
height: 13,
fontSize: 12,
fontFamily: 'MicrosoftYaHei',
lineHeight: 12,
fill: "#C5E2FF"
}
}
],
series: [
{
name: 'Access From',
type: 'pie',
center:['15%','45%'],
radius: ['60%', '75%'],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
scale: false, // 取消最外层饼图的高亮效果
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 16.13,
name: '农业用水量',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(95,235,246,0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(95,235,246,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgb(95,235,246)' // 100% 处的颜色
}
]
}
}
},
{
value: 6.89,
name: '工业用水量',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgb(21,118,226)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(21,118,226,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(21,118,226,0.1)' // 100% 处的颜色
}
]
}
}
},
{
value: 9.42,
name: '生活用水量',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgb(99,193,100)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(99,193,100,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(99,193,100,0.1)' // 100% 处的颜色
}
]
}
}
},
{
value: 3.33,
name: '生态环境用水量',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 184, 0, 0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(255, 184, 0, 0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 184, 0, 1)' // 100% 处的颜色
}
]
}
}
}
]
}
]
},
optionPie2:{
tooltip: {
show:false,
trigger: 'item'
},
legend: {
top: '10%',
itemWidth: 13,
itemHeight: 6,
right: '5%',
orient: 'horizontal',
textStyle: {
height: 18,
fontSize: 12,
lineHeight: 17,
rich: {
a: {
width:40,
color: '#fff' // 农业用水量的颜色
},
b: {
width:70,
textAlign:'left',
color: 'rgba(255, 219, 0, 1)' // 工业用水量的颜色
},
c: {
color: 'rgba(176, 228, 255, 1)' // 生活用水量的颜色
}
}
},
formatter: function (name) {
var dataIndex = 0;
var data = optionList2;
for (var i = 0; i < data.length; i++) {
if (data[i].name === name) {
dataIndex = i;
break;
}
}
return `{a|${name}} {b|${data[dataIndex].value}亿m³} {c|${
(
(data[dataIndex].value /
optionList2.reduce((acc, cur) => acc + cur.value, 0)) *
100
).toFixed(0) + '%'
}}`;
},
data: [
{
name: '芙蓉区',
itemStyle: {
color: '#00FFF4'
}
},
{
name: '开福区',
itemStyle: {
color: '#009AFF'
}
},
{
name: '雨花区',
itemStyle: {
color: '#00FF5F'
}
},
{
name: '长沙县',
itemStyle: {
color: '#FFB800'
}
},
{
name: '浏阳市',
itemStyle: {
color: '#8800FF'
}
}
]
},
graphic: [
{
type: 'image',
id: 'outerImage',
left: '2%',
top: '8%',
z: 10, // 图层位置
bounding: 'raw',
style: {
image: pie2,
width: 140,
height: 101,
}
},
{
type: 'image',
id: 'innerImage',
left: '7.5%',
top: '19%',
z: 10, // 图层位置
bounding: 'raw',
style: {
image: pie1,
width: 75,
height: 75
}
},
{
type: "text", //通过不同top值可以设置上下显示
left: '13%',
top: '32%',
style: {
text: "70",
textAlign: "center",
height: 21,
fontSize: 18,
fontFamily: 'DINAlternate',
fontWeight: 'bold',
lineHeight: 21,
fill: "#F5FCFF"
}
},
{
type: "text", //通过不同top值可以设置上下显示
left: '10%',
top: '47%',
style: {
text: "总量(亿m³)",
textAlign: "center",
height: 13,
fontSize: 12,
fontFamily: 'MicrosoftYaHei',
lineHeight: 12,
fill: "#C5E2FF"
}
}
],
series: [
{
name: 'Access From',
type: 'pie',
center:['15%','45%'],
radius: ['60%', '75%'],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
scale: false, // 取消最外层饼图的高亮效果
label: {
show: false,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 16.13,
name: '芙蓉区',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(95,235,246,0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(95,235,246,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgb(95,235,246)' // 100% 处的颜色
}
]
}
}
},
{
value: 6.89,
name: '开福区',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgb(21,118,226)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(21,118,226,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(21,118,226,0.1)' // 100% 处的颜色
}
]
}
}
},
{
value: 9.42,
name: '雨花区',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgb(99,193,100)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(99,193,100,0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(99,193,100,0.1)' // 100% 处的颜色
}
]
}
}
},
{
value: 9.42,
name: '长沙县',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 184, 0, 0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(255, 184, 0, 0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 184, 0, 1)' // 100% 处的颜色
}
]
}
}
},
{
value: 3.33,
name: '浏阳市',
itemStyle: {
color: {
colorStops: [
{
offset: 0,
color: 'rgba(136, 0, 255, 0.1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(136, 0, 255, 0.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(136, 0, 255, 1)' // 100% 处的颜色
}
]
}
}
}
]
}
]
},
}
},
mounted(){
this.$nextTick(()=>{
this.init()
})
},
methods:{
init(){
// 获取图表容器的 DOM 元素
var chartContainer1 = document.getElementById('echarts-pie1');
var chartContainer2 = document.getElementById('echarts-pie2');
if(chartContainer1){
chartContainer1.removeAttribute('echarts_instance');
// 检查是否已经有图表实例在该容器上初始化
if (!chartContainer1.hasAttribute('echarts_instance')){
// 初始化 ECharts 实例
myEcharts = this.$echarts.init(chartContainer1);
myEcharts.setOption(this.optionPie)
// 在容器上设置一个标记,表示已经初始化了 ECharts 实例
chartContainer1.setAttribute('echarts_instance', 'true');
}else {
// 已经存在图表实例,可能不需要再次初始化
console.error('图表已经在该容器上初始化过。');
}
}else {
console.error('找不到图表容器,请检查容器 ID 是否正确。');
}
if(chartContainer2){
chartContainer2.removeAttribute('echarts_instance');
// 检查是否已经有图表实例在该容器上初始化
if (!chartContainer2.hasAttribute('echarts_instance')){
// 初始化 ECharts 实例
myEcharts2 = this.$echarts.init(chartContainer2);
myEcharts2.setOption(this.optionPie2)
// 在容器上设置一个标记,表示已经初始化了 ECharts 实例
chartContainer2.setAttribute('echarts_instance', 'true');
}else {
// 已经存在图表实例,可能不需要再次初始化
console.error('图表已经在该容器上初始化过。');
}
}else {
console.error('找不到图表容器,请检查容器 ID 是否正确。');
}
}
},
setup() {
// 在组件销毁前执行清理操作
onBeforeUnmount(() => {
if (myEcharts) {
myEcharts.dispose();
myEcharts = null;
}
if (myEcharts2) {
myEcharts2.dispose();
myEcharts2 = null;
}
});
}
}
</script>
若有需要,自行下载。。。
效果图: