echarts的简单示例

echarts的简单实例

第一步：在HTML中设置展示的框架，给一个空的div（id=“echarts-purchase-chart”）放图表

<div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>折线图</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="gt_graph_echarts.html#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-purchase-chart"></div>
                        </div>
                    </div>
                </div>

第二步：创建一个表格chart（purchaseChart）和一个option（purchaseOption）。option即表格中的数据，包括表格的标题，类型（柱状图、饼图……），横纵坐标，参数的值等等。

var purchaseChart = {};
var purchaseOption = {
	//表格的标题
    title: {
        text: '购买数量'
    },
    //表格的信息提示框，当鼠标经过某一个区域时，有一个信息框，这里可以设置信息框的样式、内容等
    tooltip: {
    	//不设置这个参数的话是不会显示信息框的
        trigger: 'axis'
    },
    //如柱状图的x轴各个参数的柱条颜色，折线图每条线代表什么，是什么颜色
    legend: {
        data: ['购买数量']
    },
    //是否启用拖拽重计算特性，默认关闭(即值为false)
    calculable: true,
    //横轴内容
    xAxis: [],
    //纵轴内容
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: '{value} 个'
            }
        }
    ],
    //数据内容，里面存放数据
    series: []
};

第三步：初始化表格，并为表格设置option。（option中刚开始没有数据）

    payIncomeNumChart = echarts.init(document.getElementById("echarts-payIncomeNum-chart"));
    payIncomeNumChart.setOption(payIncomeNumOption);

第四步：向option中添加数据（json是通过ajax传来的json格式数据）

 var xAxisData = new Array();
                var seriesData = new Array();
                for (var i = 0; i < json.length; i++) {
                    xAxisData.push(json[i].category);
                    seriesData.push(json[i].count);
                }
                purchaseOption.xAxis = [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisData
                    }
                ];
                purchaseOption.series = [
                    {
                        name: '购买数量',
                        type: 'line',
                        data: seriesData,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ];

第五步：为表格设置新的option（这样就可以实现异步）

purchaseChart.setOption(purchaseOption, true);