echarts

来源：互联网发布：高校金融教学软件编辑：程序博客网时间：2024/06/06 03:12

简介

ECharts，缩写来自Enterprise
Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

这里写图片描述

说明文档：http://echarts.baidu.com/echarts2/doc/doc.html
首页：http://echarts.baidu.com/
echarts2.0例子：http://echarts.baidu.com/echarts2/doc/example.html
Gallery：http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

引入

echarts提供3种引入方式，可以根据你的项目类型选择合适的方式：

模块化包引入

如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。

需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。

//from echarts examplerequire.config({    packages: [        {            name: 'echarts',            location: '../../src',            main: 'echarts'        },        {            name: 'zrender',            location: '../../../zrender/src', // zrender与echarts在同一级目录            main: 'zrender'        }    ]});

模块化单文件引入（推荐）

如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。

总结来说，模块化单文件引入ECharts，你需要如下4步：

1.为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
2.通过script标签引入echarts主文件
3.为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
4.动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require(‘echarts’).init(dom)就行）

//from echarts example<body>    <div id="main" style="height:400px;"></div>    ...    <script src="./js/echarts.js"></script>    <script type="text/javascript">        require.config({            paths: {                echarts: './js/dist'            }        });        require(            [                'echarts',                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表                'echarts/chart/bar'            ],            function (ec) {                var myChart = ec.init(document.getElementById('main'));                var option = {                    ...                }                myChart.setOption(option);            }        );    </script></body>

详见入门教程：http://echarts.baidu.com/echarts2/doc/start.html

标签式单文件引入

rcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require(‘echarts/config’)， zrender.tool.color = require(‘zrender/tool/color’)

//from echarts example<body>    <div id="main" style="height:400px;"></div>    ...    <script src="example/www2/js/dist/echarts-all.js"></script>    <script>        var myChart = echarts.init(document.getElementById('main'));        var option = {            ...        }        myChart.setOption(option);    </script></body>

可以直接引入的单文件如下：

dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试

详见入门教程：http://echarts.baidu.com/echarts2/doc/start.html

自定义构建echarts单文件

详见 echarts-optimizer 安装使用说明：README.md

初始化

通过require获得echarts接口（或者命名空间）后可实例化图表，echarts接口仅有一个方法init，执行init时传入一个具备大小的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实现为多实例的，同一页面可在多个dom上init出多个图表，同一个dom上多次init将自动释放已有实例（1.4.0+）。init方法说明如下：
这里写图片描述

    var myChart = echarts.init(document.getElementById(id));    var option = {        color: ['#727272', '#5682CB', '#C790B8', '#FACD8A', '#8CCCCB'],        legend: {            bottom: "15%",            right: "2%",            itemWidth: 8,            itemHeight:8,            data: [                {                    name:'0-10dBm',                    icon : 'circle' // 圆点 ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 [SVG PathData](http://www.w3.org/TR/SVG/paths.html#PathData)。可以从 Adobe Illustrator 等工具编辑导出。                },                 {                    name:'11-15dBm',                    icon : 'circle'                },                {                    name:'16-20dBm',                    icon : 'circle'                },                {                    name:'21-25dBm',                    icon : 'circle'                }                ,                {                    name:'26-30dBm',                    icon : 'circle'                }            ],            formatter:function(name){                var datas = option.series;                for(var i = 0; i< datas.length ; i++){                    if(name == datas[i].name){                        return name +' '+(datas[i].data[0])+ '%';                    }                }            }        },  tooltip : {            trigger: 'item',            formatter: " {a} : <br/>  {c}%"        },        grid: {            left: '0%',            right: '2%',            top: '40%',            bottom: '30%',            width: "98%",            containLabel: true        },        xAxis:  {            type: 'value',            max: 100,            show:false        },        yAxis: {            type: 'category',            data: ['周一'],            show:false        },        series: [            {                name: '0-10dBm',                type: 'bar',                stack: '总量',                data: [30]            },            {                name: '11-15dBm',                type: 'bar',                stack: '总量',                data: [12]            },            {                name: '16-20dBm',                type: 'bar',                stack: '总量',                data: [22]            },            {                name: '21-25dBm',                type: 'bar',                stack: '总量',                data: [15]            },            {                name: '26-30dBm',                type: 'bar',                stack: '总量',                data: [21]            }        ]    };    myChart.setOption(option);    window.addEventListener("resize", function () {//每个图 自适应        myChart.resize();    });    myChart.on('click', function (obj){        console.log(obj)    });

选项

这里写图片描述

阅读全文

0 0