ECharts柱状图

最新推荐文章于 2022-04-23 23:26:03 发布

努力的睿小宝

最新推荐文章于 2022-04-23 23:26:03 发布

阅读量95

点赞数

文章标签： echarts javascript vue.js

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

版权

结果：

代码：

<!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: 400px;
            width: 400px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        // 实例化对象那个
 var myChart = echarts.init(document.querySelector('#app'));
//  配置options
var option = {
    color:["#2f89cf"],  //修改柱子的颜色
    tooltip:{
        trigger:"axis",
        axisPointer:{
            type:"shadow"  //鼠标放上边有阴影  line和shadow
        }
    },
    // 修改图表大小
    grid:{
        left:'0%',
        top:'10px',
        bottom:'4%',
        right:'0%',
        containLabel:true
    },
    // x轴相关设置
    xAxis:[{
        type:'category',
        // x轴文字的配置
        axisLabel:{
            color:'rgba(255,255,255,6)',
            fontSize:'12'
        },
        // x轴坐标轴样式不显示
        axisLine:{
            show:false
        },
        data:['旅游','教育',
        '游戏','医疗',"电商","社交",'金融'],
        axisTick:{
            alignWithLabel:true
        }
     }  
    ],
    yAxis:[
        {
            type:'value',
            axisLabel:{
                color:'rgba(255,255,255,6)',
                fontSize:'12'
            },
            // y轴线条配置
            axisLine:{
                lineStyle:{
                    color:'rgba(255,255,255,.1)',
                    width:2
                }
            },
            // y轴分割线样式
            splitLine:{
                lineStyle:{
                    color:'rgba(255,255,255,.1)'
                }
            }
        }
    ],
    // 修改柱子的圆角和宽度
    series:[
        {
            name:'直接访问',
            type:'bar',
            barWidth:'35%',//宽度
            // y轴的数据
            data:[200,300,300,900,1500,1200,600],
            itemStyle:{
                // 修改柱子圆角
                barBorderRadius:5
            }
        }
    ]
}
// 配置项个实例对象
myChart.setOption(option);
// 让图表跟随屏幕自适应
// window.addEventListener('resize',function() {
//     myChart.resize()
// })
    </script>
</body>
</html>

努力的睿小宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts柱状图

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

扫一扫

ECharts柱状图

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