用不好zrender，该如何使用echart图做多系列柱状图？

直接CV，具体需要的js文件自行百度网上查询
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二个包含第一个echart3</title>
    <script src="../js/echarts.js"></script>
</head>
<body>

<button οnclick="aaa()">点我</button>
<div id="main" style="width:800px;height: 800px;"></div>
    <!--=============================================================-->
</body>
<script type="application/javascript">

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            legend: {//设置示例
                data: ['华为P总销售量','红米系列总销售量','华为P9销售量','红米7销售量'],
                type: "plain",
                right: '2%',
                textStyle: {
                    // 图例文字样式
                    color: "black",
                    fontSize: 14,
                    fontFamily: "微软雅黑"
                },
                itemWidth: 33, // 图例图形的宽度
            },
            xAxis: [
                {//设置横坐标
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                {
                    //隐藏第二X轴
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: {//设置纵坐标
                type: 'value',
                // 隐藏y轴
                axisLine: {
                    show: false
                },
                // 隐藏刻度线
                axisTick: {
                    show: false
                },
                // 网格线设置
                splitLine: {
                    type: "dashed",
                    color: "#eeeeee"
                }
            },
            title: {
                text: "数据展示图"
            },
            tooltip: {//设置弹框
                trigger: 'axis',
                axisPointer: {type: 'shadow'}
            },
            grid: {//设置网格样式
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            series: [
                {
                    name: '红米系列总销售量',
                    type: 'bar',
                    xAxisIndex: 1,//使用第二X轴
                    //  barWidth: '60%', //柱子宽度
                    data: [3500, 3500, 3500, 3500,3500,3500,3500]
                },
                {
                    name: '华为P总销售量',
                    type: 'bar',
                    xAxisIndex: 1,
                   // barWidth: '60%', //柱子宽度
                    data: [3000, 3000, 3000, 3000,3000,3000,3000],
                },
                {
                    name: '红米7销售量',
                    type: 'bar',
                    xAxisIndex: 0,//使用第二X轴
                    barWidth: '20', //柱子宽度
                    barGap: 1.2, //柱子之间间距
                    data: [2000, 2000, 2000, 2000,2000,2000,2000]
                },
                {
                    name: '华为P9销售量',
                    type: 'bar',
                    xAxisIndex: 0,//使用第一X轴
                    barWidth: '20', //柱子宽度
                    barGap: 1.2, //柱子之间间距
                    data: [1000, 1000, 1000, 1000,1000,1000,1000],
                    itemStyle: {
                            normal: {
                                color: 'yellow', //柱子颜色
                                opacity: 1,
                                barBorderRadius: 1,  //柱子菱角
                            }
                        }
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
</script>
</html>
对于单系列还有一种版本
可以参考(8条消息) echarts柱状图实现重叠_Moving bricks的博客-CSDN博客_echarts柱状图重叠
用不好zrender，该如何使用echart图做多系列柱状图？

猜你喜欢
