how to use Echarts3(a charts tool by baidu) in Liferay7?
Question
I need a charts tool in Liferay7,then my boss recommended to use Echarts3 which is a free charting library by baidu,however,Liferay uses Jsp whereas echarts uses js, so how do I import js to jsp and how to set related properties in Liferay 7? here is echarts3 demo:
<!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>
1 answers
solution1
0 2016-08-24 10:02:56
This is not something specific to Liferay or even JSP(applies to any presentation layer used).In order to make our applications more user friendly and interactive,many pre-built javascript plugins are widely available.In order to use them to our purpose,we need to provide them with the necessary data and also the DOM element(mostly a div or class),for them to display an interactive structure to end user. There are many other charting frameworks available such as Chart Js or Google Charts which can be effectively integrated,once you go through the steps needed to configure it. In the case of eChart,you need to include given JS,provide DOM element and in the end provide necessary data,from your JSP.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.