---- AI试用 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

echarts 基本使用

前端开发 蚂蚁 4860℃ 0评论

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

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

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

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

echarts饼状图实现步骤:

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

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
</body>

2,为图形准备容器

<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

<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,添加显示数据

<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

http://blog.csdn.net/lishuangzhe7047/article/details/38895117

转载请注明:有爱前端 » echarts 基本使用

喜欢 (4)or分享 (0)