ECharts，项目进展

项目情况

有了上次项目的经验，这次我们的目标明确了很多。先是一起讨论了下所需要的需求，具体需要什么样的数据，哪些功能，方便后端建表。然后是前端的分工，讨论页面整体的色调，怎样的布局，需要哪些东西，然后是具体的分工，谁负责哪一部分，及时交流。但是我们明显感觉到了前后端速度的区分，后端的接口差不多都写好了，但是前端页面还没准备好，还遇到了一些新的难题，基本上是一边写，一边学。

Echarts

因为这次前台东西特别少，所以后台呈现数据就显得很重要，我们决定用图表的形式来展现，直观且清晰。刚开始我是打算手写一个扇形图的，用svg的canvas来写，通过两个圆的叠加和不同的外边框，是可以显示出一个扇形图的。但是后来看到了 Echarts，这么好用的库，为啥不用嘞。

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

门槛很低，有html和JavaScript基础就可以使用了，并且是可以免费商用的。
关于ECharts的具体操作可以参考菜鸟教程
这里面列举了几个例子，扇形图，条形图，旭日图等的，可以帮助我们学习。
除此之外，ECharts还有
type: ‘bar’：柱状/条形图
type: ‘line’：折线/面积图
type: ‘pie’：饼图
type: ‘scatter’：散点（气泡）图
type: ‘effectScatter’：带有涟漪特效动画的散点（气泡）
type: ‘radar’：雷达图
type: ‘tree’：树型图
type: ‘treemap’：树型图
type: ‘sunburst’：旭日图
type: ‘boxplot’：箱形图
type: ‘candlestick’：K线图
type: ‘heatmap’：热力图
type: ‘map’：地图
type: ‘parallel’：平行坐标系的系列
type: ‘lines’：线图
type: ‘graph’：关系图
type: ‘sankey’：桑基图
type: ‘funnel’：漏斗图
type: ‘gauge’：仪表盘
type: ‘pictorialBar’：象形柱图
type: ‘themeRiver’：主题河流
type: ‘custom’：自定义系列
都是在type中修改类型的

核心代码

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        myChart.setOption({
            series : [
                {
                    name: '访问来源',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {value:235, name:'视频广告'},
                        {value:274, name:'联盟广告'},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ]
                }
            ]
        })
    </script>

多练习，多运用，就能熟练掌握它了