您的位置：首页 > 其它

echarts基本使用

2017-03-09 17:18 363 查看

   最近项目中要做图形报表，要求使用echarts实现，图形报表有很多中实现之前也接触过，但echarts还是头一次听说，正好可以趁这个机会好好学习一下它。

之前不知道就不知道啦，现在知道了就了不得了，一下子喜欢上了echarts，今后项目中要是让做报表我肯定首选echarts在没有强制要求的前提下。主要是echarts太完美了：1，开源软件，无私的为我们提供漂亮的图形界面；2，使用简单，默默的为我们封装了重要的js，只要会引用就会使用echarts；3，种类多，echarts为我们提供了各种图标，其中最具象征的就是地图了；4，兼容性好，基于HTML5动画渲染超棒。

  echarts官网提供了源码和说明文档，使用echarts需要先到官网下载需要的js源文件。

官网上的demo中夹杂着很多我们用不到的东西，想使用饼状图就得从demo中把不用的去掉，劈植斩叶留下最原始的功能实现。这样毕竟比较费时，我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示：

echarts饼状图实现步骤：

1，在简单的html中引入js文件

[html] view
plain copy

print ?

<head>

    <meta charset="utf-8">

    <title>Charts demo</title>

     <script src="js/esl.js"></script>

</head>

<body>

</body>

2，为图形准备容器

[html] view
plain copy

print ?

<head>

    <meta charset="utf-8">

    <title>Charts demo</title>

     <script src="js/esl.js"></script>

</head>

<body>



    <div id="picturePlace"></div>



</body>

就是在html中添加一个div给定id，图表就会显示在div中。

3，模块导入js

[html] view
plain copy

print ?

<head>

    <meta charset="utf-8">

    <title>Charts demo</title>

     <script src="js/esl.js"></script>

</head>

<body>

    <div id="picturePlace"></div>

     <script type="text/javascript">

        // 路径配置

        require.config({

            paths:{

                'echarts' : 'js/echarts',

                'echarts/chart/pie' : 'js/echarts'

            }

        });

    </script>

</body>

4，添加显示数据

[html] view
plain copy

print ?

<head>

    <meta charset="utf-8">

    <title>Charts demo</title>

     <script src="js/esl.js"></script>

</head>

<body>

    <div id="picturePlace"></div>

     <script type="text/javascript">

        // 路径配置

        require.config({

            paths:{

                'echarts' : 'js/echarts',

                'echarts/chart/pie' : 'js/echarts'

            }

        });



         // 使用

        require(

            [

                'echarts',

                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载

            ],

            function (ec) {

                // 基于准备好的dom，初始化echarts图表

                var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));



                option = {

                        title : {

                            text: '某站点用户访问来源',

                            subtext: '纯属虚构',

                            x:'center'

                        },

                        tooltip : {

                            trigger: 'item',

                            formatter: "{a} <br/>{b} : {c} ({d}%)"

                        },

                        legend: {

                            orient : 'vertical',

                            x : 'left',

                            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

                        },

                        toolbox: {

                            show : true,

                            feature : {

                                mark : {show: true},

                                dataView : {show: true, readOnly: false},

                                restore : {show: true},

                                saveAsImage : {show: true}

                            }

                        },

                        calculable : true,

                        series : [

                            {

                                name:'访问来源',

                                type:'pie',

                                radius : '55%',

                                center: ['50%', '60%'],

                                data:[

                                    {value:335, name:'直接访问'},

                                    {value:310, name:'邮件营销'},

                                    {value:234, name:'联盟广告'},

                                    {value:135, name:'视频广告'},

                                    {value:1548, name:'搜索引擎'}

                                ]

                            }

                        ]

                    };



                // 为echarts对象加载数据

                myChart.setOption(option);

            }

        );

    </script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航