【无标题】

2021-12-19 16:01:55 阅读：161 来源： 互联网

结果：

代码：

<!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>

标签：柱子,false,show,color,无标题,刻度,data
来源： https://blog.csdn.net/weixin_44279243/article/details/122025087

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【无标题】