vue使用Echarts常见警告处理方法

【警告一】[ECharts] DEPRECATED: textStyle hierarchy in label has been removed since 4.0. All textStyle properties are configured in label directly now.

这个警告信息是因为你在使用 ECharts 时，使用了旧版本的配置方式，即在 label 的配置项中使用了 textStyle 层级来设置文本样式，而这种配置方法从 ECharts 4.0 版本开始就被废弃了。新的配置方式是将原来在 textStyle 中的属性直接放到 label 配置项中。

例如，如果你之前的配置是这样的：

label: {
  show: true,
  textStyle: {
    color: 'red',
    fontSize: 18
  }
}

你应该修改为：

label: {
  show: true,
  color: 'red',
  fontSize: 18
}

【警告二】[ECharts] DEPRECATED: barBorderRadius is deprecated, use borderRadius instead.

这个警告信息意味着在 ECharts 中使用 barBorderRadius 属性已经被弃用，建议使用 borderRadius 替代。如果你在柱状图配置中使用了 barBorderRadius 来设置柱子的圆角，现在应该改为使用 borderRadius。

例如，如果你之前的配置是这样的：

itemStyle: {
  normal: {
    barBorderRadius: [10, 10, 0, 0]
  }
}

你应该将它修改为：

itemStyle: {
  borderRadius: [10, 10, 0, 0]
}

【警告三】[ECharts] There is a chart instance already initialized on the dom

这个警告信息表明在同一个 DOM 元素上尝试初始化了多个 ECharts 实例。ECharts 要求每个 DOM 元素上只能初始化一个图表实例。如果你在不同的地方或者事件中多次调用了初始化图表的代码，就可能遇到这个问题。

解决这个警告的方法通常有两种：

方法一：在初始化新实例之前，先销毁旧的实例

在你每次创建一个新的 ECharts 实例之前，先检查该 DOM 元素上是否已经有了一个实例，如果有，则先销毁它。可以使用 echarts.getInstanceByDom(domElement) 来检查某个 DOM 元素上是否已经初始化了图表实例，如果返回一个实例，则可以调用该实例的 dispose 方法来销毁它。

// 假设 container 是你图表容器的 DOM 元素
var container = document.getElementById('main');
// 尝试获取已存在的图表实例
var myChart = echarts.getInstanceByDom(container);
// 如果实例存在，则先销毁它
if (myChart) {
    myChart.dispose();
}
// 然后再创建一个新的实例
myChart = echarts.init(container);

方法二：复用已有的实例

另一个方法是，如果已经有了一个实例，就不创建新的实例，而是复用已有的实例。你可以更新已有实例的配置来反映新的数据或者图表选项，使用 setOption 方法。

// 假设 container 是你图表容器的 DOM 元素
var container = document.getElementById('main');
// 尝试获取已存在的图表实例
var myChart = echarts.getInstanceByDom(container);
// 如果实例不存在，则初始化它
if (!myChart) {
    myChart = echarts.init(container);
}
// 使用 setOption 方法更新图表
myChart.setOption(option);

选择哪种方法取决于你的具体需求。如果你需要完全重新创建一个图表（例如，图表类型完全不同），可能需要销毁旧的实例然后初始化一个新的。如果只是更新数据或配置，复用现有实例会更高效。