学习笔记：ECharts

（Highcharts 167K；　　ECharts 354K；　　jqChart 240K），如果用于网络，Highchart最小

ECharts (Enterprise Charts 商业产品图表库)

提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。

http://echarts.baidu.com/doc/doc.html　　文档

http://echarts.baidu.com/doc/example.html 　　实例

一个简单的饼图

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:600px;height:400px"></div>

<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
    paths: {
        echarts: \'http://echarts.baidu.com/build/dist\'
    }
});

// 使用
require(
    [
        \'echarts\',
        //按需加载 (例如:使用柱状图就加载bar模块)
        \'echarts/chart/line\',             //折线（面积）图
        //\'echarts/chart/bar\',             //柱状（条形）图
        //\'echarts/chart/scatter\',        //散点（气泡）图
        //\'echarts/chart/k\',             //K线图
        \'echarts/chart/pie\',             //饼（圆环）图
        //\'echarts/chart/radar\',         //雷达（面积）图
        //\'echarts/chart/chord\',         //和弦图
        //\'echarts/chart/force\',         //力导向布局图
        //\'echarts/chart/map\',             //地图
        //\'echarts/chart/gauge\',         //仪表盘
        //\'echarts/chart/funnel\',         //漏斗图
        //\'echarts/chart/eventRiver\',    //事件河流图
        //\'echarts/chart/venn\',         //韦恩图
        //\'echarts/chart/treemap\',        //矩形树图
        //\'echarts/chart/tree\',         //树图
        //\'echarts/chart/wordCloud\',    //字符云
        //\'echarts/chart/mix\',             //混搭
        //\'echarts/chart/component\',    //组件
        //\'echarts/chart/other\',         //其他
        //\'echarts/chart/theme\',         //主题
        //\'echarts/chart/topic\',         //专题
    ],
    function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById(\'main\')); 

        ///////////////////////
        option = {
            title : {
                text: \'某站点用户访问来源\',
                subtext: \'纯属虚构\',
                x:\'center\'
            },
            calculable : false,
            series : [
                {
                    name:\'访问来源\',
                    type:\'pie\',//饼图
                    radius : \'50%\',
                    center: [\'50%\', \'60%\'],
                    data:[
                        {value:335, name:\'直接访问\'},
                        {value:310, name:\'邮件营销\'},
                        {value:234, name:\'联盟广告\'},
                        {value:135, name:\'视频广告\'},
                        {value:1548, name:\'搜索引擎\'}
                    ]
                }
            ]
        };
        ///////////////////////

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    }
);
</script>

如果想指定颜色：　　2016-6-17

{value:24, name:\'材料费\', itemStyle:{normal:{color:\'#f7ef1e\'}}},

2018-3-22

https://www.leiphone.com/news/201801/6Reu67irBCdGcBM8.html　　百度数据可视化实验室成立

ClayGL：

ClayGL 是一个高性能 WebGL 框架，能够帮助用户快速搭建可视化、三维模型展示、交互广告等 Web3D 的应用，提供 Canvas、SVG、VML 等多种渲染方式。据 ECharts 团队介绍，ClayGL 作为 ECharts GL 的底层 WebGL 支持框架，2017 年已经在手机百度中成功落地了三维模型展示的应用，充分验证了产品的可靠性。

http://claygl.xyz/　　高性能渐进式 WebGL 框架 ClayGL

https://github.com/pissang/claygl