canvas绘图 echarts 基本使用

来源：互联网发布：ioscf手游刷枪软件编辑：程序博客网时间：2024/05/21 19:46

同时可参考博客:http://www.uneeded.net http://www.stepday.com/topic/?804

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

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

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

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

echarts饼状图实现步骤：

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

[html] view plaincopyprint?
<head>  
    <meta charset="utf-8">  
    <title>Charts demo</title>  
     <script src="js/esl.js"></script>  
</head>  
<body>  
</body>  

2，为图形准备容器

[html] view plaincopyprint?
<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 plaincopyprint?
<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 plaincopyprint?
<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>  

5，运行程序显示结果

以上是饼状图的实现步骤，柱状图散点图跟这个类似就是引用js时饼状图是pie，柱状图是bar，对应的option里面的数据不同，程序的架子是一样的。。

点击下载源码：地址1，地址2

0 0