ECharts的学习（一）：制作一个简单的柱状图

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

长安古意

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

阅读量4.6k

点赞数

分类专栏：控件学习

本文链接：https://blog.csdn.net/aiyishengyishi/article/details/53421365

版权

控件学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文章作为学习ECharts练手之作，中文学习地址：http://echarts.baidu.com/index.html
实现效果如下：

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.0.0.min.js"></script>

</head>
<style type="text/css">
    html,body{
        margin:0;
        padding: 0;
    }
    .chartContainer{
        width:100%;
        height:13rem;
        border:1px solid pink;
        box-sizing:border-box;
    }
</style>
    <body>
        <div class="chartContainer" id="chart1">

        </div>
    </body>
    <script type="text/javascript">
    //初始化echarts实例
    /*console.info($("#chart1"));*/
    var chart1=$("#chart1").get(0);//使用jquery，一定要加.get(0)，不然会找不到对象，和canvas的使用是一样的
    var myChart1=echarts.init(chart1);
    //对echarts做基础配置
    var option={
        title:{
            text:"echarts 入门示例"
        },
        tooltip:{},
        legend:{
            data:["销量"]
        },
        //x轴的文本
        xAxis:{
            data:["新疆","西藏","云南","广西","广东","四川"]
        },
        //y轴的文本
        yAxis:{},
        series:[{
            name:"销量",
            type:"bar",
            data:[5,20,36,10,20]
        }]
    };

    myChart1.setOption(option);
    </script>
</html>