Echart图表入门

1、Echart是什么？

Enterprise Charts的缩写，商业级数据图表，一个纯Javascript的图表库。更多的内容可以参考网上的资料

2、使用步骤

a、下载开发包

官网地址：http://echarts.baidu.com/

所需文件：\echarts-2.2.7\build\dist

b、html页面引入需要的js文件并准备放图表的div（一定要设置大小）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>The Chart</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/dist/echarts.js"></script>    //这个js用来绘制图表
    <script type="text/javascript" src="../js/chart.js"></script>     //引入Echart开发包
</head>
<body>
<div id="main" style="height: 400px;width: 400px">    //这个div用来放图表

</div>
</body>
</html>

c、JavaScript绘制图表

echart.js

$(function(){

//配置Echart路径
    require.config({
        paths: {
            echarts:'../js/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom（即html页面中的div），初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));

            var option = {
                tooltip: {
                    show: true
                },
                legend: {
                    data:['销量']
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        "name":"销量",
                        "type":"bar",
                        "data":[5, 20, 40, 10, 10, 20]
                    }
                ]
            };

            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
})

d、效果图

posted on 2016-12-30 14:31 浮川之畔阅读(427) 评论(0) 收藏举报