【无标题】

结果:

【无标题】

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>
    <script src="./echarts.js"></script>
    <style>
        #app {
            height: 300px;
            width: 400px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        var myColor = ['#1089E7','#F57474','#56D0E3','#F8B448','#8B78F6']
    // 实例化对象
 var myChart = echarts.init(document.querySelector('#app'));
//  配置
 var options = {
// 修改图形大小
    grid:{
        top:'10%',
        left:'22%',
        bottom:'10%',
        containLabel:false  //改为false  不为刻度标签留位置  
    },
    xAxis:{
        // 不显示x轴相关信息
        show:false
    },
    // y轴有两组数据
    yAxis:[
        {
            type:'category',
            data:['HTML5','CSS3','javascript','VUE','NODE'],
            // 不显示y轴线
            axisLine:{
                show:false
            },
            // 不显示y轴刻度
            axisTick:{
                show:false
            },
            // y轴文字(刻度标签)设为白色   设置刻度标签
            axisLabel:{
                color:'#fff',
                fontSize:12
            },
            inverse:true   //默认和data中的数据是反的   设置为true就职顺序的
        },
        {
            show:true,
            type:'category',
            data:[702,350,610,793,664],
            // 不显示y轴线
            axisLine:{
                show:false
            },
            // 不显示y轴刻度
            axisTick:{
                show:false
            },
            // y轴文字(刻度标签)设为白色   设置刻度标签
            axisLabel:{
                color:'#fff',
                fontSize:12
            },
            inverse:true
        },
    ],
    series:[
        // 第一组柱子
        {
            name:'条',
            type:'bar',
            data:[70,34,60,78,69],
            barCategoryGap:50,//修改柱子间距
            barWidth:10,//修改柱子宽度
            itemStyle:{//每个柱子的颜色
                // 修改第一组柱子的圆角
                barBorderRadius:20,
                // 此时的color可以修改柱子的颜色
                color:function(params) {
                    // params是柱子各个对象
                    // dataIndex是当前柱子的索引号
                    return myColor[params.dataIndex]
                }
            },
            // 图形上的文本标签
            label:{
                // 可以显示文字
                show:true,
                // 显示在柱子内部
                position:'inside',
                // {c}会自动的解析为data中的数据
                formatter:'{c}%',
                color:'#fff'
            },
            yAxisIndex:0 //y轴层叠性
        },
        // 第二组柱子   外边包的框
        {
            name:'框',
            type:'bar',
            data:[100,100,100,100,100],
            barWidth:15,
            barCategoryGap:50,
            itemStyle:{
                color:'none',
                borderWidth:3,
                borderColor:'#00c1de',
                barBorderRadius:15

            },
            yAxisIndex:1//第二个柱子会把第一个柱子包起来
        }
    ]
 }
//  把配置给实例化对象
myChart.setOption(options);
// 让图表跟随屏幕自适应
window.addEventListener('resize',function() {
    myChart.resize()
})
    </script>
</body>
</html>

 

上一篇:【leetcode第 169 场周赛】5297. 跳跃游戏 III


下一篇:【力扣】[热题HOT100] 169.多数元素