echarts柱形图

最新推荐文章于 2024-06-25 15:34:07 发布

晨埃 @

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量180

点赞数

分类专栏：小业务，小错误

本文链接：https://blog.csdn.net/weixin_43750002/article/details/91374441

版权

小业务，小错误专栏收录该内容

19 篇文章 0 订阅

订阅专栏

直接上简单的代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是柱形图练习</title>
</head>
<script src="../js/echarts.min.js"></script>//导入你的echarts.min.js
<body>
    <div id="mian" style="width:800px;height:600px;margin:0px auto;"></div>
    <script type="text/javascript">
        var myChart =echarts.init(document.getElementById("mian"));
        var option = {
            aria: {
                show: true
            },
            title:{
                show:true,
                link:"https://echarts.baidu.com/option.html#title.target",
                target:"blank",
                text:"lol柱形图"
                //id:默认不指定，或者引用组件用或使用在option中，
            },
            textstyle:{
                color:"red",
                fontStyle:"italic" , //主题文字字体风格：normal  italic  oblique
                fontWeight:"normal" ,//可选：bold  bolder  lighter  normal;
                fontFamily:"sans-serif",//还有很多选项可查询  seerif     monospace     arial     Courier New     Microsoft Yahei
                fontSize:18,//字体大小；
                lineHeight:66,//行高   rich:可以自定义一个富文本样式,rich中如果没有定义行高会取其父级的行高，如有需要去看
                width:60,//文字块宽度一般不指定   height  文字块高度一般不指定
                textBorderColor:"yellow",//字体的描边颜色；  textBorderWidth  描边宽度
                textShadowColor:'transparent',//文字的阴影颜色   textshadowblur:字体的阴影长度；
                textShadowoffsetY:20,//字体阴影Y偏移     textshadowoffsetX:字体阴影x偏移
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","gouzi"]
            },
            yAxis: {},
            series: [{
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20,66]
            }]
        };
        myChart.setOption(option)
    </script>
</body>
</html>

晨埃 @

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts柱形图

直接上简单的代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>这是柱形图练习</title></head><script src="../js/echarts.min.js">&l...
复制链接

扫一扫

专栏目录