百度 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('出现错误,请稍后重试!');
   }
});