【无标题】

最新推荐文章于 2024-06-15 14:41:39 发布

努力的睿小宝

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量159

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/weixin_44279243/article/details/122025087

版权

结果：

代码：

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

努力的睿小宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

结果：代码：<!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"> &lt
复制链接

扫一扫

【无标题】

“相关推荐”对你有帮助么？