学习笔记：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