echarts蝴蝶图

ECharts（Enterprise Charts）是百度开源的一个基于JavaScript的可视化图表库，它提供了丰富的图表类型和交互功能，可以帮助开发者快速构建各种数据可视化的应用。蝴蝶图（Butterfly Chart）是ECharts中的一种特殊类型的图表，它主要用于展示两个相对独立的数据集之间的对比关系。

蝴蝶图通常由两个相互镜像的柱状图组成，其中一个柱状图表示正值数据，另一个柱状图表示负值数据。通过这种方式，可以直观地比较两个数据集之间的差异，并且可以清晰地展示正负值之间的关系。

在ECharts中，使用蝴蝶图可以通过以下步骤实现：
1. 引入ECharts库和相关依赖文件。
2. 创建一个DOM容器，用于显示图表。
3. 初始化ECharts实例，并设置容器和主题。
4. 配置蝴蝶图的数据和样式，包括正负值数据、颜色、标签等。
5. 将配置项应用到ECharts实例中，并渲染出图表。

以下是一个简单的示例代码，展示了如何使用ECharts创建一个蝴蝶图：

// 引入ECharts库
import echarts from 'echarts';

// 创建DOM容器
const container = document.getElementById('chart-container');

// 初始化ECharts实例
const chart = echarts.init(container);

// 配置蝴蝶图的数据和样式
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['正值', '负值']
  },
  xAxis: {
    type: 'category',
    data: ['数据1', '数据2', '数据3', '数据4', '数据5']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '正值',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
        position: 'inside'
      },
      data: [100, 200, 300, 400, 500]
    },
    {
      name: '负值',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
        position: 'inside'
      },
      data: [-100, -200, -300, -400, -500]
    }
  ]
};

// 将配置项应用到ECharts实例中
chart.setOption(option);

这是一个简单的蝴蝶图示例，你可以根据自己的需求进行进一步的配置和样式调整。希望对你有所帮助！