echarts 用ts 横向双向柱状图

ECharts是一个强大的数据可视化库，支持多种图表类型，包括横向双向柱状图。在TypeScript (TS) 中使用 ECharts，你需要首先安装官方提供的 TypeScript 编译文件，这可以让你直接在 TypeScript 项目中导入并使用 ECharts。

创建一个横向双向柱状图的基本步骤如下：

1. **引入依赖**：

   import { Column } from 'echarts'; // 引入ECharts的Column图表类型

2. **初始化图表**：

   const chart = echarts.init(document.getElementById('main')); // 获取到绘图容器

3. **配置选项**：

   const option: any = {
     xAxis: { // X轴配置
       type: 'category', // 类型为分类轴
       data: ['A', 'B', 'C', 'D'], // 数据标签
     },
     yAxis: { // Y轴配置
       type: 'value', // 类型为数值轴
     },
     series: [
       {
         type: Column,
         data: [5, 20, 36, 10], // 柱状图的数据
         stack: '总量', // 如果需要堆叠
         label: {
           normal: { show: true }, // 标签显示
         },
       },
       {
         type: Column,
         data: [-2, -8, -4, -7], // 另一侧的柱状图数据
         stack: '总量',
       },
     ],
   };

4. **渲染图表**：

   chart.setOption(option); // 设置图表选项并渲染

注意：在实际项目中，你需要处理 TypeScript 的类型注解以及兼容ES6语法。同时，ECharts API的更新可能会对某些选项结构有影响，建议查看官方文档或最新版本的API说明。