"Reprinted from: Http://echarts.baidu.com/echarts2/doc/start.html"
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%>
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>ECharts</title>
<body>
<!--prepare a DOM-to-size (wide-height) for echarts
<div id= "main" style= "height:400px" ></div>
<!--echarts Single File Introduction-
<script src= "${pagecontext.request.contextpath}/lib/echart/dist/echarts.js" ></script>
<script type= "Text/javascript" >
Path configuration
Require.config ({
Paths: {
Echarts: ' ${pagecontext.request.contextpath}/lib/echart/dist '
}
});
Use
Require
[
' Echarts ',
' Echarts/chart/bar '//use a histogram to load the bar module and load it on demand
],
Function (EC) {
Initialize the Echarts chart based on the prepared DOM
var mychart = ec.init (document.getElementById (' main '));
var option = {
Tips
ToolTip: {
Show:true
},
Legend
Legend: {
data:[' Sales ']
},
X-Axis
Xaxis: [
{
Type: ' Category ',
Data: ["shirts", "sweaters", "chiffon shirts", "trousers", "high Heels", "socks"]
}
],
Y-Axis
YAxis: [
{
Type: ' Value '
}],
Series: [{
"Name": "Sales",
"Type": "Bar",
"Data": [5, 20, 40, 10, 10, 20]
}]
};
Loading data for Echarts objects
mychart.setoption (option);
}
);
</script>
</body>
A simple example of Echart
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
