Echarts 使用总结

Echarts 导入

Echarts非常的强大！都用起来吧

echarts 能够支持的图形很多，开发者可以按需自己去引入想要使用的模块，echarts 3 支持在线构建 构建地址，用户最好能去按需加载，而且一般来说如果引入了echarts-all.js 则在第一次加载的时候需要很长的时间，非常不利与网页的加载。

导入配置 js

目录结构：assets/scripts/
esl.js
echarts.js
echarts-map.js

<script src="assets/scripts/esl.js"></script>
require.config({
        paths:{ 
            echarts:'./assets/scripts/echarts',
            'echarts/chart/map' : './assets/scripts/echarts-map',
        }
    });
require(
        [
            'echarts',
            'echarts/chart/map'   //按需加载,bar,k,line...
        ],
        requireCallback
    );  
ChinaMap = document.getElementById('ChinaChart');// dom节点，用做图表的容器 
ChinaChart = echarts.init(ChinaMap);//用echarts填充dom节点，去ajax的回调函数中使用 
var options_china = getChinaoptions();//获取要显示的数据其实就是json格式的配置文件去ajax的回调函数中使用
ChinaChart.setOption(options_china,true);//显示

ajax 获取数据

要注意ajax我们平时使用的是异步请求（默认设置）async设置为 false。所以我们去设置option的时候要在其回调函数中设置，否则程序一开始会报错。因为option中的数据为空的时候去加载echarts会有异常抛出。

 URL="http://localhost:8080/Users";
    $.ajax({
        url:URL,
        data:null,
        datatype:"json",
        type:"GET",
        success: function(response){
            var userName=[];
            var age=[];
            for(i=0;i<response.length;i++){
                userName.push(response[i].userName);
                age.push(response[i].age);
                };

            option.xAxis[0].data=userName;  //注意这有可能是多个坐标轴
            option.series[0].data=age;  

            mybar=echarts.init(Bar);
            mybar.setOption(option,true); 
        }

    });

展示

简单加载了中国地图