echarts圖形化展現

一，使用echarts作圖形化展現

　　1），使用echarts最須要注意的是一個圖形須要的參數，只要參數提供正確，那麼使用echarts是簡單的

　　2），官網：http://echarts.baidu.com/index.html

二，引入須要的js文件（下載官方提供的）

<script src="js/echarts.js"></script>
<script src="js/dark.js"></script>

<!-- jquery 引入 -->

<script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>

三，聲明一個容器，指定高度寬度

<div id="myecharts" style="height: 300px;width: 500px"></div>

四，配置參數

<script type="text/javascript">

　　//初始化方法

     var myChart = echarts.init(document.getElementById('myecharts')); // 指定圖表的配置項和數據
 myChart.setOption({ title: { text: '示例' }, tooltip: {}, legend: { data:['銷量'] }, series: [{ type: 'pie', //圖形類型
 data: [] //須要填充數據的地方用[],而後安裝數據格式填充數據
 }] });

五，加載數據並初始化

//加載數據
     $(function() { $.ajax({ url : 'getechart', type : 'post', data : { }, dataType : 'json', success : function(data) { // 填入數據
 myChart.setOption({ series: [{ // 根據名字對應到相應的系列
 data: data }] }); } }); });

六，準備數據

　　1）先看須要的數據類型是什麼樣的

　　

　　2）準備數據　

　　

@Controller
public class EchartController {
    
    @RequestMapping("getechart")
    @ResponseBody
    public String getechart() {
        Map<Object, Object> map = null;
        
        
        List<Object> seriesList = new ArrayList<>();
        map = new HashMap<>();
        map.put("value", 335);
        map.put("name", "直接訪問");
        seriesList.add(map);
        
        map = new HashMap<>();
        map.put("value", 310);
        map.put("name", "郵件營銷");
        seriesList.add(map);
        
        map = new HashMap<>();
        map.put("value", 274);
        map.put("name", "聯盟廣告");
        seriesList.add(map);
        
        map = new HashMap<>();
        map.put("value", 235);
        map.put("name", "視頻廣告");
        seriesList.add(map);
        
        map = new HashMap<>();
        map.put("value", 400);
        map.put("name", "搜索引擎");
        seriesList.add(map);
        
        return JSON.toJSONString(seriesList);
    }
}

 

七，效果展現