1. 程式人生 > >關於使用echarts心得,及其注意事項

關於使用echarts心得,及其注意事項

  • 第一步匯入jquery、echarts的包
  • 程式碼如下:
<script src="static/scripts/jquery/echarts.js"></script>
<script src="static/scripts/jquery/jquery-1.4.4.min.js"></script>
  • 第二部建立div盒子:
  • 程式碼如下:
//注意事項:
			1、一定要給定寬高,其他css樣式是我後期加上去的。
			2、id='main'是後期dom物件需要的
 <div id="main" style="width: 800px;height: 400px;padding-top: 100px;padding-bottom: 100px;padding-left: 300px"></div>
  • 第三部建立一個初始化模組,放置官網程式碼:
  • 程式碼如下:
 <script type="text/javascript">
        //初始化echarts例項,dom使用id=‘main’進行初始化
        var myChart = echarts.init(document.getElementById('main'));
        var option={
        			注意事項:
        				1、這裡面放入從官網複製過來的程式碼,只要複製option{裡面程式碼}
        				2、把script標籤放在div後面(共同讓入body中),我在放入head標籤內時無顯示圖片,放在body最下面也沒反應,這點可以借鑑下
        				3、基本上所有的echarts程式碼往這裡面套就行了
        }
        //使用制定的配置項和資料顯示圖表
        myChart.setOption(option);
  </script>

轉載請攜帶連線謝謝,希望能幫到大家,我也搞了一晚上才總結出來,希望小夥伴一定遇事要冷靜哦!