• 百度echart初用总结


    1.先下载echarts.js.我在百度下载的是 echarts-2.2.7 (from Baidu).压缩包里面的build->dist中的echarts.js或者echarts-all.js文件和build->dist->chart里面的各种图表js我才取来用。

    2.引入echarts.js文件

      第一种:模块化单文件引入(推荐)

      1)最重要的第一步是引入echarts.js。

      2)主文件引入后你将获得一个AMD环境,然后就开始配置require.config

    <script type="text/javascript">
            require.config({
                paths: {
                    echarts: 'js'             //我的echarts.js是放在js目录下的。如果是在js另外个文件夹ech里的 js/ech   写成这样就可以了
                }
            });
            require(
                [
                    'echarts',          
                    'echarts/chart/radar'      //我的radar雷达图js是放在js/chart下面的,为什么/chart前面会是echarts我也不太清楚,我猜是表示echarts文件的同级目录吧。。。。我尝试过吧radar.js放在和echarts.js文件同级目录下,然后修改这里的路径,没报错,但是没效果
                ],
                function (ec) {
                    var myChart = ec.init(document.getElementById('box'));          //绑定装echart图表的盒子
                    var option = {
                        ...                                   //设置各种参数
                    }
                    myChart.setOption(option);        //为echart对象加载数据  
                }
            );
        </script>

      3)给装图表的盒子添加宽高

      第二种:标签式单文件引入

      1)第一步引入echarts-all.js。这个文件要大一半。。。

      2)

    var myChart = echarts.init(document.getElementById('box'));          //绑定装echart图表的盒子
       option = {
            ...                   //设置各种参数
       };
       myChart.setOption(option);        //为echart对象加载数据

      3)给装图表的盒子添加宽高

      还有个模块化包引入。http://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts1  自己看文档吧。

      option配置项里的参数,在文档->配置项查找工具里面可以搜索各个配置的信息

      

      这里有个http://ecomfe.github.io/echarts-builder-web/在线构建echarts的,但是只适用于echarts2.选择所需图表,然后在线打包成js文件,然后就可以直接用第二种方式引入并使用了。

  • 相关阅读:
    递归---Day29
    File类---Day28
    线程池---Day26
    微信公众号运营人员必备的软件工具网站合集
    消息中间件的技术选型心得-RabbitMQ、ActiveMQ和ZeroMQ
    itoa函数的递归实现(二级指针实现)
    二叉树——查找两个任意节点的最近祖先
    C#多线程(二)
    C#多线程(一)
    Websocket协议之php实现
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/7815726.html
Copyright © 2020-2023  润新知