Echarts 配置 使用心得

菜鸟记录:

查看大神Echarts 心得,成功实现了项目中数据图表。

echarts 配置如下:

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script type="text/javascript">
    require.config({
         paths:{
            echarts:'http://echarts.baidu.com/build/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/line'
         ],
        function(ec){
              var barChart8 = ec.init(document.getElementById("main8"));
              option8 = {
                  。

                  。

                  。
};
            barChart8.setOption(option8,true);
             window.onresize = barChart8.resize;
        }
  );
</script>

但是由于项目部署到内网导致数据报表无法显示。

原因: 内网无法获取  http://echarts.baidu.com/build/dist    echarts.js包

然后我就下载echarts.js包,导入到发现 还是无法显示。

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

本地配置需要注意:

注意1:

发现 大神们 Echarts心得中 还导入了(由于少导入这个包,十分的纠结。。)

 <script src="<%=path%>/js/echarts/com/esl.js"></script>

esl.js 架包 :ESL是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

注意2:

require.config  paths 路径

            'echarts':'<%=path%>/js/echarts/js/echarts',       √

            'echarts':'<%=path%>/js/echarts/js/echarts.js',    X

的结尾 最后  echarts 就可以  ,  无需写 echarts.js 。

最后的 本地   echarts  成功配置 

 导入echarts.js包

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

导入esl.js包
 <script src="<%=path%>/js/echarts/com/esl.js"></script>
 
 <script type="text/javascript" >
    require.config({
         paths:{
            'echarts':'<%=path%>/js/echarts/js/echarts',       
            'echarts/chart/pie':'<%=path%>/js/echarts/js/echarts',
            'echarts/chart/bar':'<%=path%>/js/echarts/js/echarts',
            'echarts/chart/line':'<%=path%>/js/echarts/js/echarts'
        }
    });

实现图表对象 与上类似

猜你喜欢

转载自blog.csdn.net/DreamITEffort/article/details/83543658