echarts的使用详解

最近做的项目里面用的都是echarts，第一次用这个东西，感觉还是很不错的，今天搞好有点时间，就记录一下吧

  

1.用的时候引入jQuery.js

2.需要的js

以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。

ECharts下载地址： http://echarts.baidu.com/

ZRender下载地址：http://ecomfe.github.io/zrender/index.html

用这个应该也可以的：

<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

3.

<div id="echart" style="width:100%;height:500px">
</div>

4.

var myChart = echarts.init(document.getElementById('echart'), 'macarons');
option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '50%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

myChart.setOption(option);

这是柱状图和折线图请求数据：

load();
function load(){
    $.ajax({
        type:"post",
        async:true,
        url:"/serve_application/getData",
        dataType:"json",
        success:function(result){
                optionOne.xAxis[0].data=result.xAxisData;
                optionOne.series[0].data=result.adReqArray;
                myChartOne.hideLoading();
                myChartOne.clear();
                myChartOne.setOption(optionOne);

        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChartOne.hideLoading();
        }
    });
}

后台返回来的json数据填充图表即可。

再来看看饼图请求数据：

load();
function load(){
    $.ajax({
        type:"post",
        async:true,
        url:"/serve_count_visit_Http/getData",
        dataType:"json",
        success:function(result){
            var arraypie = [];
            for(var i=0;i<result.length ;i++){
                var mappie ={};
                mappie.name = result.namehaha[i];
                mappie.value = result.valuehaha[i];
                arraypie[i]=mappie;
            }
            myChartPie.hideLoading();
            myChartPie.setOption({
                legend: {
                    data: result.namehaha
                },
                series:[{
                    // 根据名字对应到相应的系列
                    name: '访问来源',
                    type: 'pie',
                    data:  arraypie

                }],
            });
        },
        error:function(){
            alert("图表请求数据失败!");
            myChartPie.hideLoading();
        }

    });
}

可以调整他的纵坐标的单位

yAxis : [
    {
        type : 'value',
        //axisLabel : {
        //    formatter: '{value} sec'
        //}
        axisLabel : {
            formatter: function(v){
                var vs= parseInt(v);
                vs=vs/(1024*1024*1024);
                return vs.toFixed(2)+'G'
            }
        }
    }

],

默认无数据是有气泡的 怎么办呢 ，可以给他默认值，也可以如下：

  noDataLoadingOption :{
                    text: '暂无数据',
                    effect:'bubble',
                    effectOption : {
                      effect: {
                           n: 0 //气泡个数为0 
                        }
                    },
                    textStyle: {
                        fontSize: 32,
                        fontWeight: 'bold'
                    }
                }

好了，就先记录到这吧！