vue3 echarts 加载时显示图表已经在该容器上初始化过问题

已于 2023-12-28 14:25:34 修改
阅读量515 收藏 8
点赞数 10
分类专栏： echarts 文章标签： echarts 前端 javascript
于 2023-12-28 14:24:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssy001128/article/details/135267981
版权

目录

主要代码

1、检查是否已存在图表实例，若存在删除

         2、在组件销毁前清除图表

         总体思路：若存在图表先进行销毁在重新初始化  就可以解决。。

         全部代码： 

控制台报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>

若有需要，自行下载。。。 

pie2
pie2.png
pie1.png
pie1.png

效果图： 

易鹤鹤.
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
Vue3+TS中使用echarts
kiligcoding的博客
04-27 1396
TypeScript 中，无论是 .vue 文件还是 .js 文件，都需要使用 .d.ts 文件来添加类型声明。ECharts 提供了官方的类型声明文件，只需要在项目中安装 @types/echarts 就可以使用。在 setup 函数中使用 ref 或 reactive 定义一个 ECharts 变量。在 onMounted 钩子函数中初始化 ECharts 实例，同时使用 chartRef.value 获取 DOM 元素。2.在组件中声明 ECharts 变量。3.初始化 ECharts 实例。
vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染
YZRHANYU的博客
03-15 4030
vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染
Vue3+TS中引入ECharts（按需引入，简单教程）
宝子的博客
06-15 6977
Vue3+TS的项目中使用ECharts。很简单的操作一看就会。
vue3+ts echarts的使用
qq_40912618的博客
12-06 469
vue3+ts按需引入echarts，以雷达图为例：1、安装echarts npm install echarts --save 2、在utils文件夹下创建一个echarts.js文件 3、在需要使用的页面里先定义一个容器，然后将图表放入这个容器
vue3中使用echarts初次渲染图表十分小的问题及解决方法
小绵杨
03-08 2931
项目场景：vue3中引入了echarts图表，在onMounted中初始化图表。vue3中使用echarts初次渲染图表十分小的问题及解决方法
vue3中运用echarts出现的一些问题解决
weixin_53141315的博客
05-27 1149
vue3中运用echarts出现的一些问题解决
[问题解决]Echarts:There is a chart instance already initialized on the dom.
热门推荐
qq_43546866的博客
08-28 1万+
Chrome 报警告如下图： 产生原因 使用Echarts插件的时候，多次加载会出现There is a chart instance already initialized on the dom.的警告，表示DOM上已经初始化了一个图表实例。 解决方案 方案一 定义一个全局变量，在初始化之前先判断该实例是否存在，若存在，先销毁。 var myChart;//全局变量 function drawChart(){ if (myChart != null && myChart != ""
vue3.0 页面切换后 echarts 空白
tuoai9113的博客
12-22 724
vue echarts
Echarts清空图表：There is a chart instance already initialized on the dom.
yolo_link的博客
07-25 8142
能销毁肯定需要先存在，所以定义一个全局变量来存储创建后的ECharts实例，在改变数据需要重新绘制图表的时候加上条件判断图例是否存在来决定是否销毁。也就是说，指定的区域作为canvas容器，根据触发条件改动数据之后，依旧沿用之前的的图表配置，把图表重新生成。（有时间我试一下，再来更新）原因就是销毁二字，我想当然，图表我还需要用，你销毁再用的时候怎么获取呢？不过我在想，上面clear()方法没用，或许是实例没保存，触发时机不对。不过，可能是使用方法的位置不正确，导致方法没有合适的被使用也说不一定。......
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
vue在使用ECharts时的异步更新和数据加载详解
08-28
主要给大家介绍了关于vue在使用ECharts时的异步更新和数据加载的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
基于Vue3与ECharts的数据大屏可视化展示完整源码
最新发布
03-25
项目简介：本项目采用Vue3和ECharts技术栈，构建了一个数据大屏可视化展示的完整案例。项目包含共计73个文件，其中主要包含JSON配置文件（47个），JavaScript脚本（11个），Vue组件（8个），以及其他辅助配置和资源...
monitor:vue + echarts 可视化拖拽图表项目
04-12
能够保存图表在页面上的位置信息，大小信息，下次打开时可还原上次图表状态。 能够通过文字提示的方式控制图表显示的参数信息，而不需要去代码配置它。 支持全屏预览效果。 支持配置文件信息的下载。 支持主题添加，...
vue3.0中echarts初始化
A_lamp的博客
04-23 2248
<template> <div ref="chartDom" :class="className" :style="{height:height, width:width}" ></div> </template> <script> import { useDebounceFn } from "@vueuse/core"; import echarts from "echarts"; import { onMoun.
vue项目中使用echarts
F19980825901的博客
06-28 3503
vue项目中使用echarts
vue使用echarts中遇到的问题及解决方法
简白的博客
04-22 3210
最近在做demo的过程中用到了echarts，在过程中也踩了好多坑，所以专门记录一下遇到的问题及解决方案。 遇到的问题 安装完echarts依赖后表格示例无法显示 示例图标显示后格式异常 再次进入业务事件后提示dom已加载并展示异常 解决方案 安装完echarts依赖后表格示例无法显示 解决方案：这种问题一般会是两种情况：一是版本不对应的问题，npm install echarts --save默认的是最新的版本(5.1x)，直接安装最新版本的echarts可能会出现上述问题，所以需要降低版本安装ech
vue-echarts 设置初始化参数
ketao8331的博客
08-12 2554
vue-echarts 设置初始化参数 echarts官方API中只介绍了传统的init方法设置参数的方式，在vue-echart中，设置参数的方式为： <v-chart :options="options" :auto-resize="true" :init-options="{'renderer': 'svg'}" ref="myChart"> </v-chart> 代码中init-option属性里面设置参数即可，比如例子中，作者需要将echarts绘制的图导
echarts
weixin_34283445的博客
09-24 389
&lt;div id="main" style="width: 600px;height:400px;"&gt;&lt;/div&gt; &lt;script src="~/lib/echarts/dist/echarts.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;
vue3 echarts动态加载数据
08-18
在上述代码中，`mounted` 钩子函数中调用了 `initChart` 方法来初始化图表，并在 `loadData` 方法中模拟异步加载数据的过程。每隔 2 秒加载一次数据，将新的数据追加到 `chartData` 数组中，并调用 `refreshChart` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值