ECharts小白入门——柱状图练习

最新推荐文章于 2024-03-18 11:52:45 发布

qwe122343

最新推荐文章于 2024-03-18 11:52:45 发布

阅读量1k

点赞数 4

本文链接：https://blog.csdn.net/qwe122343/article/details/104230335

版权

上篇博客中，介绍了最简单的下载echarts.min.js的方式
这篇实际运用一下echarts.min.js，将其引入HTML中，制作一个柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts-柱状图练习</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="demo" style="height: 500px;width: 500px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('demo'));
        var option = {
            title:{
                text:'柱状图',
            },
            tooltip:{},
            legend:{
                //图例，说明
                data:['重量/kg'],
            },
            xAxis: {
                data:["苹果","香蕉","橘子"]
            },
            yAxis:{},
            series:[{
                name:'重量/kg',
                type:'bar',
                data:[5,8,10]
            }],
        };
        myChart.setOption(option);
    </script>
</body>
</html>

效果如图所示：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qwe122343

关注关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ECharts小白入门——柱状图练习

上篇博客中，介绍了最简单的下载echarts.min.js的方式这篇实际运用一下echarts.min.js，将其引入HTML中，制作一个柱状图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>echarts-柱状图练习</...
复制链接

扫一扫