zoukankan      html  css  js  c++  java
  • 百度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文件,然后就可以直接用第二种方式引入并使用了。

  • 相关阅读:
    天梯赛5-12 愿天下有情人都是失散多年的兄妹 【dfs】
    poj2718 Smallest Difference【贪心】
    HDU problem 5635 LCP Array【思维】
    codeforces 782C Andryusha and Colored Balloons【构造】
    HDU 4278 Faulty Odometer【进制转换】
    codeforces B. The Meeting Place Cannot Be Changed【二分】
    POJ 3264 Balanced Lineup 【线段树】
    HDU 1850
    CodeForces-714C
    HDU Problem 1247 Hat's Words 【字典树】
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/7815726.html
Copyright © 2011-2022 走看看