Skip to content

Instantly share code, notes, and snippets.

@ramnathv
Created October 31, 2013 03:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramnathv/7243849 to your computer and use it in GitHub Desktop.
Save ramnathv/7243849 to your computer and use it in GitHub Desktop.
My First eChart
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<script src='http://rcharts.github.io/howitworks/echarts/echarts/js/esl.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 575px;
height: 400px;
}
</style>
</head>
<body>
<div id='chart5f8f4315e145' class='rChart echarts'></div>
<script type='text/javascript'>
// Step:3 conifg ECharts's path, link to echarts.js from current page.
var jsurl = 'http://rcharts.github.io/howitworks/echarts/echarts' + '/js/echarts-map'
require.config({
paths:{
'echarts': jsurl,
'echarts/chart/bar' : jsurl,
'echarts/chart/line': jsurl,
'echarts/chart/scatter': jsurl,
'echarts/chart/k': jsurl,
'echarts/chart/pie': jsurl,
'echarts/chart/map': jsurl,
'echarts/chart/force': jsurl,
'echarts/chart/radar': jsurl
}
});
// Step:4 require echarts and use it in the callback.
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/map',
'echarts/chart/force',
'echarts/chart/radar'
],
function(ec) {
var eC = ec.init(
document.getElementById('chart5f8f4315e145')
);
var chartParamschart5f8f4315e145 = {
"dom": "chart5f8f4315e145",
"width": 575,
"height": 400,
"series": [
{
"name": "Food and Tobacco",
"type": "line",
"data": [ 22.2, 44.5, 59.6, 73.2, 86.8 ]
},
{
"name": "Household Operation",
"type": "line",
"data": [ 10.5, 15.5, 29, 36.5, 46.2 ]
},
{
"name": "Medical and Health",
"type": "line",
"data": [ 3.53, 5.76, 9.71, 14, 21.1 ]
},
{
"name": "Personal Care",
"type": "line",
"data": [ 1.04, 1.98, 2.45, 3.4, 5.4 ]
},
{
"name": "Private Education",
"type": "line",
"data": [ 0.341, 0.974, 1.8, 2.6, 3.64 ]
}
],
"xAxis": {
"type": "category",
"data": [ 1940, 1945, 1950, 1955, 1960 ]
},
"legend": {
"data": [ "Food and Tobacco", "Household Operation", "Medical and Health", "Personal Care", "Private Education" ]
},
"id": "chart5f8f4315e145"
}
eC.setOption(chartParamschart5f8f4315e145);
}
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment