ECharts-个人记录（按部就班的教程）-自己加了个ajax刷新数据

第零步：到ECharts下载好js插件

       插件包括：echarts.js（最主要插件），bar.js，line.js，pie.js（后面三个是我自己要用到，可以根据自己需要下载）

第一步：导入js

<script src="echarts.js"></script>

第二步：配个<div>

<div id="mainBar" style="height:85%;width:98%;"></div>

第三步：

 var myChart;
 var option ;
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: '${pageContext.request.contextPath}/js/eCharts'
        }
    });
    require(
        [
            //这里的'echarts'相当于'./js'
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/pie',
        ],
        //创建ECharts图表方法
        function (ec) {
            myChart = ec.init(document.getElementById('mainBar'));
            option = {
                grid:{
                    x:43,
                    y:45,
                    x2:25,
                    y2:25
                },
                tooltip: {
                    trigger: 'axis'
                },
                title : {
                    text: '监测点统计报表分析',
                    x:'center'
                },
                legend: {
                    show: false,
                    x: 'left',
                    y: 'top',
                    data: ['事故数量']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: false},
                        dataZoom: {
                            show: false,
                             title: {
                                dataZoom: '区域缩放',
                                dataZoomReset: '区域缩放后退'
                            }
                        },
                        dataView: {show: true, readOnly: true},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true},
                        myTool1: { 
                            show: false, 
                            title: '自定义1', 
                            icon:'${pageContext.request.contextPath}/images/icon/xq.png', 
                            option:{}, 
                            onclick: function (){ 
                                alert('myToolHandler1');
                            }
                        }
                    }
                },
                calculable: false,
                xAxis: [{
                    show: true,
                    type: 'category',
                    name:'日',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'normal'
                        },
                        interval: '0'
                    }
                }],
                yAxis: [{
                    show: true,
                    type: 'value',
                    name:'数值',
                    splitArea: {show: true}
                }],
                series: [{                   
                    name: "数量",                    
                    type: 'bar',                    
                    data: [],
                   markPoint: {
                            data: [
                                {type: 'max', name: '最大值2'},
                                {type: 'min', name: '最小值'}
                            ]
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: "{c}",
                            position: 'top',
                            textStyle: {
                                color: '#473C8A',
                                fontSize: '12',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                        //color:'rgba(181,195,52,1)', 
                        label:{show:true,textStyle:{color:'#27727B'}}
                        }
                  }
                }]
            }; 

//给option设置数据

option.xAxis[0].data = ['企业a','企业b','企业c','企业d'];
option.series[0].data = [20,3,22,33];
myChart.clear();
myChart.setOption(option); 

第四步：看结果（图表中需要加上一些个性化的设计，修改option的配置就可以了，详细如何修改请查看EChart官网的“文档”→“配置项手册”里面，要自己慢慢找，我不喜欢他没有图文并茂，找起来有点麻烦。）

第五步：我自己有使用ajax等方法刷新数据（要注意需要将myChart、option设置成全局变量）

function getStatisticsByAjax(month){
        //去数据库进行匹配
        $.ajax({
            url:"staticalchartJson.action", //处理页面的路径
            data:{'statisticsMonth':month}, //要提交的数据是一个JSON
            type:"POST", //提交方式
            dataType:"JSON", //返回数据的类型
            success:function(data){ //回调函数 ,成功时返回的数据存在形参data里
                eChartList = data.data;
                var corTypeName = [];
                var corTypeDate = [];
                for(var i=0;i<eChartList.length;i++){
                    corTypeName.push(eChartList[i].CREATE_TIME);
                    corTypeDate.push(eChartList[i].ALARM_NUM);
                }
                
                option.xAxis[0].data = corTypeName;
                option.series[0].data = corTypeDate;
                myChart.clear();
                myChart.setOption(option); 
            }
        });
    }

最后：如果你只需要简简单单的一个图，不需要特别的需求，那么可以考虑使用“echarts.min.js”，不用“echarts.js”，就是官网上面说的5分钟上手ECharts。