1. 程式人生 > >百度 echarts 使用總結

百度 echarts 使用總結

1.主題設定

html:

<div id="dataimg" style="width: 600px;height:400px;">

    </div>

JS:

<script>

                 var myChart1 = echarts.init(document.getElementById('dataimg1'), 'vintage');

                 var option =省略.....你要顯示的資料

                 myChart1.setOption(option);

</script>

重要的問題,主題不變是因為引入的js順序問題............

先是echart 再引入主題..........

<script type="text/javascript" src="../js/echarts/3.4/echarts.js"></script>
<script type="text/javascript" src="../js/echarts/3.4/vintage.js"></script>

2,多圖共用一個圖表

使用了velocity,所以把option部分放到VM檔案中了ajax請求資料後顯示.

需要注意的地方:

var option 
= eval("(" + data.data + ")");
具體程式碼如下
$.ajax({
   url:'/test/getTestData',
   data:{id:id},
   traditional:true,
   dataType:'json',
   type:'post',
   success:function(data){if (data.success) {
         // 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('dataimg1'), 'dark');
         var 
option = eval("(" + data.data + ")"); //// 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); } }, error:function(){ alert('出現錯誤,請稍後重試!'); } });