ECharts 初体验

缘起

ECharts，缩写来自Enterprise Charts，商业级数据图表，它最初是为了满足公司商业体系里各种业务系统（如凤巢、广告管家等等）的报表需求。以前这些系统的图表需求我们都是使用flash去实现的，百度分工很细，有专门的flash组同学去做这个事情，这就不可避免多了一个沟通环节，作为前端工程师无法独立掌控，不管是数据接口的设计，个性化的需求都得沟通商定。而且一个系统内会有很多个flash在不同场景下出现，他们并没有实现通用。加上乔帮主不让i系列上运行flash以及html5的火热，我们需要寻求一个解决方案。于是在2012年初，当时还是凤巢前端技术负责人的Kener-林峰在凤巢数据平台项目中尝试使用Canvas去做图表，他写了一个全新的轻量级Canvas类库ZRender，那可以说是ECharts的原型，虽然跟现在已经相去十万八千里了。

　　百度资深前端Erik回归后组建起了百度商业前端通用技术组，在前面提到的背景下加上前端团队的经理祖明的强力支持，数据可视化成为了通用技术里一个重要的研究方向，林峰也就这样顺理成章的从凤巢技术负责人转到现在的角色，百度商业前端数据可视化团队负责人。痴狂于web3d的技术天才沈毅，沉迷图形图像的杨骥，有SVG/GUI实战经验的宿爽，对颜色如数家珍的陈怀木等等来自一线的工程师加入组建起了可视化团队。

　　正如前面提到的，ECharts来自ZRender，那时的ZRender是包含图表功能的，甚至拖拽重计算已经在那个时候被实现了，但各种图表数据逻辑与图形渲染耦合，非模块化，Demo时随心所欲的特殊定制，我们意识到这是一个糟糕的设计。ZRender做了第一次大规模的重构，抽离了一切图表相关功能，纯粹的作为底层Canvas类库使用。

　　而被抽离的图表逻辑构建成为ECharts 0.1版本，但基本仍旧属于Demo状态，因为接口不规范，个性化能力和通用性都太差了。Erik和林峰，以及3位来自Flash组的资深工程师（百度商业系统中多年来所做的各种flash图表基本出自他们或者是他们所带领的团队），花了近2个月时间先后开了6次会议终于制定并发布了百度图表库标准1.0版本。这份标准是在几乎没考虑实现成本的情况下制定的，追求设计的合理、高度个性化的扩展能力，可想而知，这是给团队挖了一个很深很深的坑，在紧接着的近10个月时间里ECharts团队就是看着文档一步一步从这个坑里爬出来。

　　幸运的是我们真爬出来了，2013年6月30，ECharts发布了1.0版本，这份标准完全成为了ECharts 1.0的API文档，而且我们还加入了更多的数据交互能力。虽然这份标准目前已经成为了ECharts文档的子集了，但它的重要性不容置疑，回过头看这段历程，我们衷心的感谢制定这份标准的5位工程师（林峰、赵庶、Erik、刘阳、杨冬），在我们看来接口设计的合理比起实现成本重要得多。

基本使用

<html >
    <head><script src="jquery.min.js"></script>
         <script src="echarts.js"></script>
    </head>
        <body >
            <div id="mainBar" style=" 100%; height:40%;border:1px solid #ccc;padding:10px;"></div>
    <button onclick="return onButtonClick()">点击显示</button>
    </body>
        <script>
        //ECharts.init(document.getElementById('mainBar'));

        function onButtonClick() {
            console.log(ECharts)
            var options = {
                title : {
                    text: '某地区蒸发量和降水量',
                    subtext: '纯属虚构'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'蒸发量',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'降水量',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        markPoint : {
                            data : [
                                {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                                {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
            ECharts.init(document.getElementById('mainBar')).setOption(options);
        }
    </script>
        </html>

讲解

当页面加载的看到的如果不先执行这段代码

ECharts = ec;
ECharts.init(document.getElementById('mainBar')).setOption(options);

而执行这段代码

var myChart = ECharts.init(document.getElementById('mainBar'));
myChart.setOption(options);

图表是不会出现的

（注意）因为是什么呢？

通过console.log(ECharts) 打印，是出不来的，这样说明的就是，初始时同步并没有赋值

所以需要在回调方法里面初始话

require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/map'
            ],
            function (ec) {
                 //将对象保存下来
                ECharts = ec;
                ECharts.init(document.getElementById('mainBar')).setOption(options);
                //--- 折柱 ---
               //var myChart = ec.init(document.getElementById('mainBar'));
                //myChart.setOption(options);
            }
        );