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

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? 我需要在Liferay7中使用图表工具，然后老板建议使用Echarts3，这是百度提供的免费图表库，但是，Liferay使用Jsp，而echarts使用js，因此如何将js导入jsp以及如何在Liferay中设置相关属性7？ here is echarts3 demo: 这是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 5分钟即可开始使用ECharts

Answer 1

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. 这不是Liferay甚至JSP所特有的（适用于所使用的任何表示层）。为了使我们的应用程序更加用户友好和交互，许多预构建的javascript插件广泛可用。为了将其用于我们的目的，我们需要为他们提供必要的数据以及DOM元素（主要是div或class），以便他们向最终用户显示交互式结构。 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. 一旦您完成配置所需的步骤，便可以有效地集成许多其他图表框架，例如Chart Js或Google Charts 。 In the case of eChart,you need to include given JS,provide DOM element and in the end provide necessary data,from your JSP. 对于eChart，您需要包括给定的JS，提供DOM元素，最后从JSP提供必要的数据。

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

问题描述

1 个解决方案

解决方案1
0 2016-08-24 10:02:56

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

问题描述

1 个解决方案

解决方案1 0 2016-08-24 10:02:56

解决方案1
0 2016-08-24 10:02:56