求一个堆叠柱状图的echarts写法

点点乐淘淘
  • 330

{35AC3175-9110-4D77-B44A-A17C56A844D1}_20200401180904.jpg
效果图就是这样的,求echarts语法结构如何写,以下是我的写法,只实现了单柱堆叠,不知道怎么实现一组多柱
`
{

                color: ['#3398DB'],
                legend: {
                    data: ['故障', '暂停', '运行', '离线']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器,坐标轴触发有效
                        type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['冲压机床#1', '冲压机床#2', '冲压机床#3', '冲压机床#4'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    }
                ],
                series: [
                    {
                        name: '故障',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'insideRight'
                        },
                        barWidth: '10%',
                        data: [20, 30,40, 60] // 故障 暂停 运行 离线
                    },
                    {
                        name: '暂停',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'insideRight'
                        },
                        barWidth: '10%',
                        data: [21, 30,40, 60]
                    },
                    {
                        name: '运行',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'insideRight'
                        },
                        barWidth: '10%',
                        data: [22, 30,40, 60]
                    },
                    {
                        name: '离线',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'insideRight'
                        },
                        barWidth: '10%',
                        data: [23, 30,40, 60]
                    }
                ]
            },

`

回复
阅读 2k
1 个回答

好吧,没人回答我自己来答一波,幸好没有傻等,先上效果图
{D841E5BA-62F5-460E-BE61-405A8F94C284}_20200402100748.jpg
关键在于stack这个变量的值,stack值相同的数据会堆叠在一起,上代码
`
const labelOption = {

            show: true,
            position: 'insideRight'
        }

const tooltipOption = {

            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            },
            formatter: '一班<br />故障:10H 20%<br />运行:20H 20%<br />暂停:30H 20%<br />离线:25H 20%'
        }

{

                color: ['#F56C6C', '#FFC53A', '#7CA870', '#999999'],
                legend: {
                    data: ['故障', '暂停', '运行', '离线']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['冲压机床#1', '冲压机床#2', '冲压机床#3', '冲压机床#4'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    }
                ],
                series: [
                    {
                        name: '故障',
                        type: 'bar',
                        stack: '一班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [20, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '暂停',
                        type: 'bar',
                        stack: '一班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [21, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '运行',
                        type: 'bar',
                        stack: '一班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [22, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '离线',
                        type: 'bar',
                        stack: '一班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [23, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '故障',
                        type: 'bar',
                        stack: '二班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [20, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '暂停',
                        type: 'bar',
                        stack: '二班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [21, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '运行',
                        type: 'bar',
                        stack: '二班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [22, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '离线',
                        type: 'bar',
                        stack: '二班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [23, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '故障',
                        type: 'bar',
                        stack: '三班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [20, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '暂停',
                        type: 'bar',
                        stack: '三班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [21, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '运行',
                        type: 'bar',
                        stack: '三班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [22, 30,40, 60],
                        tooltip: tooltipOption
                    },
                    {
                        name: '离线',
                        type: 'bar',
                        stack: '三班',
                        label: labelOption,
                        barWidth: '10%',
                        data: [23, 30,40, 60],
                        tooltip: tooltipOption
                    }
                ]
            }

`

tooltipOption的formatter用变量替换一下就行

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏