1. 程式人生 > >Echarts 配置 使用心得

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'
        }
    });

實現圖表物件 與上類似