在ECharts柱状图中如何实现双值显示，并且让其中一个值呈现进度条的效果？

要在ECharts柱状图中同时显示两个值，并使其中一个值以进度条形式展现，你需要对图表的配置进行一些特别的设置。这涉及到对数据标签`label`的自定义格式化以及柱状图`bar`系列的`itemStyle`中圆角的调整。通过以下步骤，你可以实现这一效果：

参考资源链接：[使用Echarts实现柱状图双值显示如同进度条](https://wenku.csdn.net/doc/645211f9ea0840391e738ebe?spm=1055.2569.3001.10343)

1. 初始化ECharts实例，并定义好你的图表容器，例如通过`echarts.init(document.getElementById('myChart'))`。

2. 准备数据，通常为两个数组，一个是柱状图的原始高度值，另一个是你想要以进度条形式展示的值。

3. 在`option`对象中，配置`tooltip`以显示自定义的提示信息，`grid`用于设置图表的布局。

4. 在`xAxis`和`yAxis`的配置中，设置坐标轴的相关属性。

5. 重点在`series`的配置中，你需要设置`type`为`bar`。通过设置`itemStyle`中的`barBorderRadius`，你可以调整柱状图的边角，以达到进度条的视觉效果。同时，你需要使用`label`的`formatter`函数来自定义显示的标签，使得柱状图上可以同时显示两个数据值。例如，`formatter`函数可以返回一个包含两个数据值的字符串，通过`params.value`和`params.data[1]`（假设你的数据数组中，`params.data[1]`是进度值）来获取。

6. 最后，将配置好的`option`对象传递给ECharts实例，并使用`setOption`方法渲染图表。

例如，你可以使用如下代码来实现：

var myChart = echarts.init(document.getElementById('myChart'));

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['完成度']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} %'
        }
    },
    yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    series: [{
        name: '完成度',
        type: 'bar',
        data: [100, 90, 70, 100, 80, 90, 80],
        barWidth: 20,
        itemStyle: {
            barBorderRadius: [3, 3, 0, 0]
        },
        label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
                return [params.value[0] + '%', params.value[1] + '%'].join(' / ');
            }
        }
    }]
};

myChart.setOption(option);

在这个例子中，`itemStyle`的`barBorderRadius`将柱状图的一侧设置了圆角，以模拟进度条的效果。同时，`label`的`formatter`函数返回了两个值，用斜杠`/`分隔，从而实现了双值显示。

推荐你查看这份资料：《使用Echarts实现柱状图双值显示如同进度条》，以获得更详细和实用的指导。这份资源将帮助你深入了解如何调整这些配置项，并且提供了一些进阶的图表定制技巧，以便你可以根据实际需求进行图表的设计和优化。

参考资源链接：[使用Echarts实现柱状图双值显示如同进度条](https://wenku.csdn.net/doc/645211f9ea0840391e738ebe?spm=1055.2569.3001.10343)