echarts之柱状图（2）

PS相关学习资料链接：Pink老师的教程分解，O(∩_∩)O哈哈~

自行设置css和html结构，这里主要是js：

(function() {
    //找到画图的区域
    var myChart = echarts.init(document.querySelector(".horization .chart"));
    //第一类柱子的颜色
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    var option = {
        grid: {
            left: '20%',
            bottom: '18%',
            containLabel: false, //grid区域是否包含刻度标签
        },
        xAxis: {
            type: 'value',
            boundaryGap: 'true',
            //坐标轴轴线
            axisLine: {
                show: false
            }
        },
        //y轴中的两个对象分别表示左边和右边的y轴
        yAxis: [{
                type: 'category',
                //是否反向坐标轴
                inverse: true,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                    }
                },
                axisTick: { // 不显示刻度
                    show: false,
                    alignWithLabel: true
                },
                axisLine: { //不显示y轴线条
                    show: false
                },
                data: ['NODE', 'VUE', 'javascript', 'CSS3', 'HTML5']
            },
            {
                type: 'category',
                inverse: true,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: "12"
                    }
                },
                axisTick: { // 不显示刻度
                    show: false,
                    alignWithLabel: true
                },
                axisLine: { //不显示y轴线条
                    show: false
                },
                data: [100, 200, 300, 400, 500]
            }
        ],
        //series中的两个对象分别表示两类柱子：条条和框框
        series: [{
                type: 'bar',
                name: "条",
                //相当于CSS中的z-index,一个柱子设为0，一个柱子设为1，表示两个柱子叠加效果
                yAxisIndex: 0,
                // 柱子之间的距离
                barCategoryGap: 50,
                data: [70, 80, 10, 78, 69],
                barWidth: 10, //柱子的宽度
                //柱子的样式
                itemStyle: {
                    barBorderRadius: 5, //圆角
                    color: function(params) { //给柱子设置颜色
                        //console.log(params);params指的是柱子对象， dataIndex 是当前柱子的索引号
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    }
                },
                // 柱子上的文本标签
                label: {
                    show: true,
                    // 图形内显示
                    position: 'inside',
                    // 文字的显示格式:c指的是data中的数据值
                    formatter: "{c}%"
                }
            },
            {
                name: "框",
                type: 'bar',
                yAxisIndex: 1,
                barCategoryGap: 50,
                data: [100, 100, 100, 100, 100],
                barWidth: 15, //柱子的宽度
                itemStyle: {
                    color: 'none',
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15 //圆角
                }
            }
        ]
    };
    myChart.setOption(option);
    //让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();