Echarts图形报表——问题处理

最新推荐文章于 2024-10-27 20:24:54 发布

原创最新推荐文章于 2024-10-27 20:24:54 发布 · 856 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

在使用Echarts进行前端图形报表开发时，遇到'已初始化图表实例'警告及'deprecated normal字段'的提示。文章详细介绍了这两个问题的原因：同一DOM节点多次初始化图表实例会导致警告，而itemStyle.normal已在4.0版本被移除。解决方案是删除不再使用的normal字段，以避免控制台警告。

There is a chart instance already initialize on the dom

当使用Echarts绘制图表时，一般会封装成一个方法，一旦多次调用该方法创建图表时使用的dom节点都是同一个，echarts.init（id）同一个实例，就会出现如上警告。

//先在实例之前，通过getInstanceByDom方法来判断是否已经存在echarts实例
//如果存在，则直接使用myChart即可
var myChart = echarts.getInstanceByDom(document.getElementById("id"))
//当echarts未实例dom节点，就进行初始化
if (myChart == null) 
{
      myChart = echarts.init(document.getElementById("id"));
}
var option ={};
myChart.setOption();

2. DEPRECATED: ‘normal‘ hierarchy in itemStyle has been removed since 4.0.

控制台黄色警告，虽然目前不影响效果，但还是解决一下。

看上诉英文就知道，这个itemStyle下的normal字段没有了，已被echarts弃用。

那么只需要解决这个小地方就行，删除掉itemStyle下的normal字段即可。

如：
itemStyle: {
    normal: {
        label: {
            show: true,
            fontSize: 10,
            color: '#ffffff'
        }
    }
}
删掉normal：
itemStyle: {
    label: {
        show: true,
        fontSize: 10,
        color: '#ffffff'
    }
}