首页 > Web开发 > 详细

利用百度Echarts.js生成雷达图

时间:2015-03-26 01:43:00      阅读:987      评论:0      收藏:0      [点我收藏+]

一、下载地址:http://echarts.baidu.com/

二、看文档(必须的)。可选择的看,先完成想要的功能,再扩展。

三、使用 推荐的 模块化单文件引入。

在在dist文件夹下会有

  • echarts-line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)

  • echarts-bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)

  • echarts-scatter.js : 散点图

  • echarts-k.js : K线图

  • echarts-pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)

  • echarts-radar.js : 雷达图

  • echarts-map.js : 地图

  • echarts-force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)

  • echarts-chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)

  • echarts-funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)

  • echarts-gauge.js : 仪表盘

  • echarts-eventRiver.js : 事件河流图

根据需要加载js文件。

四、在<head></head>标签内引入

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

注意文件路径。

然后

   <script type="text/javascript">
        require.config({
            paths: {
                echarts: ‘./js/dist‘//
            }
        });
        require(
            [
                ‘echarts‘,
                ‘echarts/chart/line‘,   // 
                ‘echarts/chart/bar‘
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(‘main‘));//main就是你要放置图的DOM的ID
                var option = {
                    .../
                }
                myChart.setOption(option);
            }
        );
    </script>

五、看文档,熟悉option里面各种选项的意义。

六、做demo实践。

利用百度Echarts.js生成雷达图

原文:http://anbaojia.blog.51cto.com/9494280/1624334

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!