Reprinted: http://blog.csdn.net/zou128865/article/details/42802671
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ECharts instance</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 Prepare a Dom with size (width and height) for ECharts-->
<div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 Import echarts.js-->
<!--Step:2 Import echarts.js-->
<script src="js/echarts.js"></script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 Configure the path of echarts for the module loader, link to echarts.js from the current page, and define the required chart path
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 Dynamically load echarts and start using it in the callback function, pay attention to keep the on-demand loading structure to define the chart path
require(
[
// 'echarts' here is equivalent to './js'
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
],
//Create ECharts chart method
function (ec) {
//--- Fold column---
//Based on the prepared dom, initialize the echart chart
var myChart = ec.init(document.getElementById('mainBar'));
//Define chart options
var option = {
//Title, each chart has at most one title control, each title control can be set to the main subtitle
title: {
//Main title text, '\n' specifies newline
text: 'Statistical report on precipitation and evaporation in Guangzhou in 2013',
// main title text hyperlink
link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',
//Subtitle text, '\n' specifies newline
subtext: 'www.stepday.com',
// subtitle text hyperlink
sublink: 'http://www.stepday.com/myblog/?Echarts',
//Horizontal placement position, the default is left, optional: 'center' | 'left' | 'right' | {number} (x coordinate, unit px)
x: 'left',
//Vertical placement position, the default is the top of the whole image, optional: 'top' | 'bottom' | 'center' | {number} (y coordinate, unit px)
y: 'top'
},
//Prompt box, information prompt when the mouse is hovering and interacting
tooltip: {
//Trigger type, default ('item') data trigger, optional: 'item' | 'axis'
trigger: 'axis'
},
//Legend, each chart has at most one legend
legend: {
//Display strategy, optional: true (display) | false (hidden), the default value is true
show: true,
//Horizontal placement position, the default is the center of the whole image, optional: 'center' | 'left' | 'right' | {number} (x coordinate, unit px)
x: 'center',
//Vertical placement position, the default is the top of the whole image, optional: 'top' | 'bottom' | 'center' | {number} (y coordinate, unit px)
y: 'top',
//legend's data: used to set the legend, the string array in data needs to correspond to the name value of each series in the sereis array
data: ['evaporation','precipitation']
},
//toolbox, each chart has at most one toolbox
toolbox: {
//Display strategy, optional: true (display) | false (hidden), the default value is false
show: true,
//Enable function, currently support feature, toolbox custom function callback processing
feature: {
//Auxiliary line flag
mark: {show: true},
//dataZoom, the frame selection area zooms, automatically synchronizes with the existing dataZoom control, respectively, enable, zoom back
dataZoom: {
show: true,
title: {
dataZoom: 'Zoom zoom',
dataZoomReset: 'Zoom zoom back'
}
},
//Data view, open the data view, you can set more properties, readOnly The default data view is read-only (that is, the value is true), you can specify readOnly to false to open the editing function
dataView: {show: true, readOnly: true},
//magicType, dynamic type switching, supports line charts, histograms, stacking, and tiling conversions under the right-angle system
magicType: {show: true, type: ['line', 'bar']},
//restore, restore, reset the original chart
restore: {show: true},
//saveAsImage, save the image (IE8-not supported), the default image type is 'png'
saveAsImage: {show: true}
}
},
//Whether to enable the drag recalculation feature, the default is off (that is, the value is false)
calculable: true,
//The horizontal axis array in the rectangular coordinate system, each item in the array represents a horizontal axis, and the value can be omitted when there is only one
//The horizontal axis is usually a category type, but in the case of a bar chart, the horizontal axis is a numerical type, and in a scatter chart, the horizontal and vertical axes are both numerical type
xAxis: [
{
//Display strategy, optional: true (display) | false (hidden), the default value is true
show: true,
//The axis type, the horizontal axis defaults to the category type 'category'
type: 'category',
//The category type axis text label array, specify the label content. Array items are usually text, '\n' specifies a newline
data: ['January','February','March','April','May','June','July','August','September', '10 Month','November','December']
}
],
//The vertical axis array in the rectangular coordinate system, each item in the array represents a vertical axis, and the value can be omitted when there is only one
//The vertical axis is usually numeric, but in the case of a bar chart, the vertical axis is category
yAxis: [
{
//Display strategy, optional: true (display) | false (hidden), the default value is true
show: true,
//The axis type, the vertical axis defaults to the numeric type 'value'
type: 'value',
//Separated area, not displayed by default
splitArea: {show: true}
}
],
// data of sereis: used to set the chart data. series is a nested structure of objects; objects contain objects
series: [
{
//Series name, if legend is enabled, the value will be indexed by legend.data
name: 'evaporation',
//Chart type, necessary parameters! If it is empty or does not support the type, the series data will not be displayed.
type: 'bar',
//The data content array in the series, the line chart and the column chart, the length of the array is equal to the length of the used category axis text label array axis.data, and there is a one-to-one correspondence between them. Array items are usually numeric
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
//The data label content in the series
markPoint: {
data: [
{type: 'max', name: 'max'},
{type: 'min', name: 'minimum'}
]
},
//The content of the data line in the series
markLine: {
data: [
{type: 'average', name: 'average'}
]
}
},
{
//Series name, if legend is enabled, the value will be indexed by legend.data
name: 'Precipitation',
//Chart type, necessary parameters! If it is empty or does not support the type, the series data will not be displayed.
type: 'bar',
//The data content array in the series, the line chart and the column chart, the length of the array is equal to the length of the used category axis text label array axis.data, and there is a one-to-one correspondence between them. Array items are usually numeric
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
//The data label content in the series
markPoint: {
data: [
{type: 'max', name: 'max'},
{type: 'min', name: 'minimum'}
]
},
//The content of the data line in the series
markLine: {
data: [
{type: 'average', name: 'average'}
]
}
}
]
};
//Load data for echarts object
myChart.setOption(option);
}
);
</script>
</body>
</html>
Introduction to various parameters of echart chart
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325356754&siteId=291194637
Recommended
Ranking