echarts 详细使用方法

1，引用

<script src="/assets/global/plugins/echarts/echarts.js" type="text/javascript"></script>

<script src="/assets/global/plugins/echarts/vintage.js" type="text/javascript"></script>

2，初始化

var myChart_c;
var dataBT;
var dataX;
var dataY;

 myChart_c = echarts.init(document.getElementById('main_c'), 'vintage');
    var option = {
        title: {
            text: "优惠券购买统计报表——暂无数据",
            x: 'center',
            top: 'middle'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [
                ]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [


        ]
    };
    myChart_c.setOption(option);

3，读取数据

从后台读取数据。数据格式返回为

  
  

   
   
{
  "m": [
    1,
    2
  ],
  "c": [
    0,
    29
  ],
  "forbt": [
    {
      "name": "2月",
      "value": 29
    }
  ]
}
  
  

此处m为月份。读出的数据为1月2月。c为该月份对应的值。forbt的数据就是切换成饼图需要的数据。

    myChart_c.hideLoading();
    myChart_c.showLoading();
    setTimeout(initBuyPriv, 1000);

  $.ajax({
        url: url,
        dataType: "json",
        async: true,
        data: {
            "year": cyear,
            "month": cmonth,
            "cmonth": $("#ddlmonth_c").val(),
            "parkName": $("#parkSelect_c").val(),
            "sumtype": $("#ddlsumtype_c").val()
        },
        success: function (msg) {
            // msg = JSON.parse(msg);
            if (msg) {
                var tempmonth = $("#ddlmonth_c").val();
                dataBT = msg.forbt;
                dataX = msg.m;
                dataY = msg.c;
                showBarNew();
            }

        }
    });

4，showBarNew生成柱状图表

        var option = {
            title: {
                text: "test",
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params, ticket, callback) {
                    if (params[0].name == "平均值" || params[0].name == "最大值" || params[0].name == "最小值") {
                        return "";
                    }
                    else {
                        return '时间：' + params[0].name + tooltiptitle + '<br/>记录数：' + params[0].value + '' + tempDw + '';
                    }
                }
            },
            toolbox:{
                show: true,
                itemSize: 20,
                feature: {
                    magicType: { show: true, type: ['line'], title: { line: '折线图' } },
                    restore: { show: false },
                    myTool1: {
                        show: true,
                        title: '饼图',
                        icon: 'image://http://cloud.lebopark.com/images/pie.png',
                        onclick: function () {
                            showPie();//切换饼图
                        }
                    },
                    myTool2: {
                        show: true,
                        title: '柱状图',
                        icon: 'image://http://cloud.lebopark.com/images/bar.png',
                        iconStyle: { width: 100 },
                        onclick: function () {
                            showBarNew();//切换柱状图
                        }
                    }
                }
            },
            calculable: true,
            legend: {
                orient: 'horizontal',
                align: 'left',
                data: "",
                left: '20%',
                top: 'bottom'
            },
            xAxis: [
                {
                    type: 'category',
                    name: "h1",
                    data: ""
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: "ci",
                }
            ],
            grid: {
                x: 120,
                y: 150
            },
            series: [
                {
                    name: "",
                    type: 'bar',
                    data: dataY,
                    itemStyle: {
        normal: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5
        }
    },
                    markPoint: {
                        data: [
                            {
                                type: 'max',
                                name: '最大值',
                                symbolSize: function (value, params) {
                                    return calsymsize(value);
                                }
                            },
                            {
                                type: 'min', name: '最小值', symbolSize: function (value, params) {
                                    return calsymsize(value);//动态改变平均值水滴的大小
                                }
                            }
                        ]
                    },
                    //系列中的数据标线内容  
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    }
                }
            ]
        };
        myChart_c.off("click");
        myChart_c.setOption(option, true);
        myChart_c.hideLoading();

5，showPie()。切换饼图

var option = {
            title: {
                text: "",
                x: 'center'
            },
            tooltip: tooltip,
            legend: {
                orient: 'vertical',
                align: 'left',
                data: [],
                left: '20%',
                top: '20%'
            },
            toolbox: {
                show: true,
                itemSize: 20,
                feature:  {
            magicType: { show: false, type: ['line'], title: ["折线图"] },
            restore: { show: false },
            myTool1: {
                show: true,
                title: '饼图',
                icon: 'image://http://cloud.lebopark.com/images/pie.png',
                onclick: function () {
                    showPie();
                }
            },
            myTool2: {
                show: true,
                title: '柱状图',
                icon: 'image://http://cloud.lebopark.com/images/bar.png',
                onclick: function () {
                    showBarNew();
                }
            }
        }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    itemStyle:  {
                normal: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(25, 100, 150, 0.5)',
                    shadowOffsetY: 5,
                    color: '#61A0A8'
                }
            },
                    roseType: 'angle',
                    radius: '55%',
                    data: dataBT
                }
            ]
        };
            myChart_c.off("click");
            myChart_c.setOption(option, true);
            myChart_c.hideLoading();

7,function calsymsize(value) {
    var symbol = [50, 50];
    switch (value.toString().length) {
        case 4:
            symbol = [60, 50];
            break;
        case 5:
            symbol = [70, 50];
            break;
        case 6:
            symbol = [80, 50];
            break;
        case 7:
            symbol = [85, 50];
            break;
        case 8:
            symbol = [95, 50];
            break;
        case 9:
            symbol = [110, 70];
            break;
        case 10:
            symbol = [120, 80];
            break;
        case 11:
            symbol = [125, 80];
            break;
        default:
            symbol = [50, 50];
            break;
    }
    return symbol;
}