block by ramnathv 7243849

My First eChart

Full Screen

index.html

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    
    <script src='//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 = '//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>