学习笔记：ECharts

时间：2024-11-19 19:33:37

（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

相关文章