强大的ECharts柱状图：负值也能美美地显示，点一下就高亮！

前端

2024-01-02 22:38:43

负值柱状图：ECharts 中的数据可视化利器

在数据可视化领域，图表扮演着至关重要的角色。ECharts，一个强大的数据可视化库，提供了丰富的图表类型，其中柱状图凭借其直观的显示方式脱颖而出。然而，当数据中包含负值时，传统的柱状图就显得力不从心了。

负值柱状图：打破传统束缚

为满足负值数据的展示需求，负值柱状图应运而生。它巧妙地将负值部分延伸到柱状图下方，形成一种更直观的正负分布呈现方式。有了负值柱状图，我们可以更清晰地把握数据的总体格局，避免因正负值混杂而产生的视觉干扰。

列表联动柱状图：交互体验更佳

为了提升用户交互体验，我们可以将负值柱状图与列表进行联动。当用户在列表中点击某个项目时，对应的柱状图值会自动高亮显示。这种交互式设计让用户能够快速关联列表中的数据与柱状图中的图形，从而更加深入地理解数据之间的关系。

实现步骤：轻松绘制负值柱状图

准备数据： 收集需要展示的数据，包括正值和负值。
创建 ECharts 实例： 初始化一个 ECharts 实例，指定画布大小和位置。
定义图表选项： 设置图表类型、颜色、标签等图表配置项。
绘制图表： 使用 ECharts API 绘制图表。

代码示例：一步步实现负值柱状图

// 准备数据
var data = [
  {name: '正值1', value: 10},
  {name: '负值1', value: -5},
  {name: '正值2', value: 15},
  {name: '负值2', value: -10}
];

// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));

// 定义图表选项
var option = {
  title: {
    text: '负值柱状图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['正值', '负值']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: data.map(function (item) {
      return item.name;
    })
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '正值',
      type: 'bar',
      data: data.map(function (item) {
        return item.value > 0 ? item.value : 0;
      }),
      itemStyle: {
        color: '#5470c6'
      }
    },
    {
      name: '负值',
      type: 'bar',
      data: data.map(function (item) {
        return item.value < 0 ? -item.value : 0;
      }),
      itemStyle: {
        color: '#91cc75'
      }
    }
  ]
};

// 绘制图表
myChart.setOption(option);