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文件,然后就可以直接用第二种方式引入并使用了。

  • 相关阅读:
    HIVE之 Sqoop 1.4.6 安装、hive与oracle表互导
    Sqoop之 Sqoop 1.4.6 安装
    PIG之 Hadoop 2.7.4 + pig-0.17.0 安装
    hadoop之 node manager起不来, 执行mapreduce 程序hang住
    Maven 简介
    graphviz 的节点形状
    graphviz 的绘图布局
    Graphviz 的命令行参数说明
    golang使用graphviz
    IDEA 项目相关基础设置
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/7815726.html
Copyright © 2011-2022 走看看