學習筆記：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