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