In the third week of entering the company, the previous notes are all handwritten.
Today, take another look at Echart2 and review again how to use Echart (module import).
IDE ： Ellipse
1. Preparations: Download the relevant files of EChart2 (ha? Put it wherever you want, you can find it):
Address: http://echarts.baidu.com/build/echarts-2.2.7.zip * Copy directly to the browser or the download tool will automatically download it.
If the address does not work, then log on to the EChart2 official website: http://echarts.baidu.com/echarts2/
Then download. *Note that this article is EChart2, not 3. So you need to pay attention when downloading
2. After the download is complete, it is a compressed package, and the open structure is as follows:
Go to the root folder ----->
3. According to the instructions of the official doc, what we roughly need is
1) dist folder under build
2) The echarts.js file under dist
We need to copy these 2 files to the place where your project stores js.
So at this time Eclipse-- WebContent structure is as follows:
The *js folder is where the js files are stored. EChart is where I keep my html files.
*The above, the file part is completed, and the code can be written below.
4. Create a new HTML page. Roughly as follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test Modularity Introducing EChart</title> </head> <body> </body> </html>
5. Create a div to hold the chart
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test Modularity Introducing EChart</title> </head> <body> <div id="main" style="width: 600px; height: 400px;"></div> </body> </html>
6. Introduce relevant js files
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Modular introduction to EChart</title> <script src="../js/echarts.js"></script> <script src="../js/jquery-1.8.3.min.js"></script> </head> <body> <div id="main" style="width: 600px; height: 400px;"></div> </body> </html>
7. Write js code, jQuery is used here. $(function (){ .... }); is the preload of jQuery, so we can write the js code in the head of the html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modular introduction to EChart</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>
8. Introduce the main file: dist .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modular introduction to EChart</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
/* After the main file is imported you will get an AMD environment, configure the require.conifg as follows: */
require.config({
paths : {
echarts : '../js/dist'
}
});
});
</script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>
9. The required form can be loaded dynamically. (Huh? What do you mean? Actually, I don't really understand. Probably you need bar (column), then you can add 'echarts/chart/bar' to require, and then you can get the js of the chart you need. !
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modular introduction to EChart</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
/* After the main file is imported you will get an AMD environment, configure the require.conifg as follows: */
require.config({
paths : {
echarts : '../js/dist'
}
});
/* After require.config is configured, echarts can be used by dynamic loading */
require(
[
'echarts',
'echarts/chart/line', // Load the required charts on demand, if you need dynamic type switching, don't forget to load the corresponding charts at the same time
'echarts/chart/bar'
]
);
});
</script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>
10. Then write the form part! directly in the function. (I copied an example directly from the official website)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bar chart converted to pie chart</title>
<script src="../js/echarts.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
/* After the main file is imported you will get an AMD environment, configure the require.conifg as follows: */
require.config({
paths : {
echarts : '../js/dist'
}
});
/* After require.config is configured, echarts can be used by dynamic loading */
require([
'echarts',
'echarts/chart/line', // Load the required charts on demand, if you need dynamic type switching, don't forget to load the corresponding charts at the same time
'echarts/chart/bar',
'echarts/chart/pie'
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text : 'The source of a site user's visit',
subtext : 'Purely fictional',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : [ 'direct access', 'email marketing', 'affiliate advertising', 'video advertising', 'search engine' ]
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'pie', 'funnel' ],
option : {
funnel : {
x : '25%',
width : '50%',
funnelAlign : 'left',
max : 1548
}
}
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
series : [ {
name : 'Access source',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data : [ {
value : 335,
name : 'direct access'
}, {
value : 310,
name : 'email marketing'
}, {
value : 234,
name : 'affiliate ad'
}, {
value : 135,
name : 'video ad'
}, {
value : 1548,
name : 'search engine'
} ]
} ]
}
myChart.setOption(option);
})
});
</script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
</html>
11.Done!! The effect is as follows:
