echarts正负柱形图设置x轴和tooltip显示值都为正数，自定义颜色显示，设置y轴显示单位

Question

echarts正负柱形图设置x轴和tooltip显示值都为正数，自定义颜色显示，设置y轴显示分值范围，某几分一档，然后根据分数和男女展示正负柱状图分布？

Answer 1

引自免费微信小程序：皆我百晓生

为了实现这个需求，你需要在ECharts中创建一个定制的图表。这里是一个详细的步骤指南和示例代码。

首先，确保你已经引入了ECharts库。如果你还没有，可以使用CDN引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>

接下来，创建一个HTML元素用于放置图表：

<div id="chart" style="width: 800px;height:600px;"></div>

现在，我们可以编写JavaScript代码来配置ECharts实例：

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

// 定义数据源，包含性别（gender）、分数（score）和标签（label）
var data = [
    { gender: '男', score: 70, label: 'A' },
    { gender: '女', score: -30, label: 'B' },
    // ... 更多数据项
];

// 计算最大和最小分数，用于设置y轴范围
var maxScore = Math.max(...data.map(item => Math.abs(item.score)));
var minScore = Math.min(...data.map(item => Math.abs(item.score)));

// 分数区间分档，每10分一档
var intervals = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
var intervalWidth = maxScore / (intervals.length - 1);

// 初始化配置项
var option = {
    title: {
        text: '分数分布'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['男', '女']
    },
    xAxis: {
        type: 'category',
        data: data.map(item => item.label),
        axisTick: {
            alignWithLabel: true
        }
    },
    yAxis: {
        type: 'value',
        name: '分数',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        min: 0,
        max: maxScore,
        splitNumber: intervals.length,
        interval: intervalWidth,
        axisLabel: {
            formatter: function(value) {
                return value + '分';
            }
        }
    },
    series: []
};

// 遍历数据并创建正负柱状图
data.forEach(function(item) {
    var seriesName = item.gender;
    var color = item.score > 0 ? '#33aacc' : '#ff4500'; // 自定义颜色

    if (!option.series.some(s => s.name === seriesName)) {
        option.series.push({
            name: seriesName,
            type: 'bar',
            stack: '总分',
            barWidth: '30%',
            label: {
                show: true,
                position: 'top'
            },
            data: [],
            itemStyle: {
                normal: {
                    color: color
                }
            }
        });
    }

    // 根据分数调整条形图的位置
    var positiveValue = Math.abs(item.score);
    var negativeValue = maxScore - positiveValue;

    option.series.find(s => s.name === seriesName).data.push(positiveValue);
    option.series.find(s => s.name === seriesName).data.unshift(negativeValue);
});

// 设置图表选项并更新
myChart.setOption(option);

这段代码会创建一个正负柱状图，其中x轴显示标签，y轴显示分数（从0到最大分数），每个刻度间隔代表10分。tooltip会显示正负值之和，而柱子的颜色会根据分数的正负进行自定义。男女性别的柱状图会被堆叠在一起，并且各自有独立的标签。

请将上述HTML、CSS和JavaScript代码放入同一个文件中，运行后你将会看到符合要求的图表。如果你有更多的数据点，请按照上面的数据格式添加到data数组中。