如何在Liferay7中使用Echarts3（百度的圖表工具）？

我需要Liferay7中的圖表工具，然後我的老闆推薦使用百度免費圖表庫Echarts3，但是，Liferay使用Jsp，而echarts使用js，那麼如何將js導入到jsp以及如何設置相關屬性在Liferay 7中？這裏是echarts3演示：如何在Liferay7中使用Echarts3（百度的圖表工具）？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ECharts</title> 
<!-- including ECharts file --> 
<script src="echarts.js"></script> 
</head> 
<body> 
<!-- prepare a DOM container with width and height --> 
<div id="main" style="width: 600px;height:400px;"></div> 
<script type="text/javascript"> 
    // based on prepared DOM, initialize echarts instance 
    var myChart = echarts.init(document.getElementById('main')); 

    // specify chart configuration item and data 
    var option = { 
     title: { 
      text: 'ECharts entry example' 
     }, 
     tooltip: {}, 
     legend: { 
      data:['Sales'] 
     }, 
     xAxis: { 
      data: ["shirt","cardign","chiffon shirt","pants","heels","socks"] 
     }, 
     yAxis: {}, 
     series: [{ 
      name: 'Sales', 
      type: 'bar', 
      data: [5, 20, 36, 10, 10, 20] 
     }] 
    }; 

    // use configuration item and data specified to show chart 
    myChart.setOption(option); 
</script>

Get Started with ECharts in 5 minutes

來源

2016-08-24 Breadykid

這不是一些具體的事情到Liferay甚至JSP（適用於使用任何表現層）。爲了使我們的應用程序的更多用戶友好和交互性，許多預建的JavaScript插件是廣泛可用的。爲了將它們用於我們的目的，我們需要爲它們提供必要的數據以及DOM元素（主要是div或class），以便它們顯示交互式結構給最終用戶。有許多其他圖表框架可用，例如Chart Js或Google Charts，一旦您完成配置所需的步驟，就可以有效地進行集成。在eChart的情況下，您需要包含給定的JS，提供DOM元素並最終從JSP中提供必要的數據。

來源

2016-08-24 10:02:56

如何在Liferay7中使用Echarts3（百度的圖表工具）？

回答

相關問題