javascript 柱状图 前端柱状图_html

实际使用是删掉 这句

stack: 'Total',

从官网搞过来的demo，一开始还没注意

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>

    <div id="main" style="width: 1200px; height: 600px; margin-bottom: 500px;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: [
                    {
                        value: '作业队1',                       
                        textStyle: {
                            fontSize: 20,
                            color: 'green'
                        }
                    },
                    
                    '作业队2', '作业队3', '作业队4', '作业队5', '作业队6', '作业队7']
            },
            series: [
                {
                    name: '未完成',
                    type: 'bar',
                    stack: 'total',
                    itemStyle: {
                        normal: {
                            color: '#ffc069'
                        }
                    },
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: '已完成',
                    type: 'bar',
                    stack: 'total',
                    itemStyle: {
                        normal: {
                            color: '#fe117d'
                        }
                    },
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [10, 132, 101, 134, 90, 230, 210]
                }                
            ]
        };


        myChart.setOption(option);
    </script>

</body>
</html>