1.　　toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。

2.　　toolbox中的属性，不包含五个工具。里面最主要的就是feature这个，这是toolbox的配置项，五个工具的配置就是在这个里面实现的。

属性 类型 说明
toolbox.show boolean 默认值为true，是否显示工具栏组件
toolbox.orient stirng 默认值为horizontal，工具栏 icon 的布局朝向。可选项为“horizontal”和“vertical”
toolbox.itemSize number 默认值为15，工具栏 icon 的大小。
toolbox.itemGap number 默认值为10，工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
toolbox.showTitle boolean 默认值为true，是否在鼠标 hover 的时候显示每个工具 icon 的标题。
toolbox.feature Object

各工具配置项。

除了各个内置的工具按钮外，还可以自定义工具按钮。

注意，自定义的工具名字，只能以 my 开头。

3.　　下面来分别介绍这五个工具

  • saveAsImage：这个工具可以把图表保存为图片。里面有些常用的参数，type->保存图片的格式，name->保存文件的名字，backgroundColor->保存图片的背景色，show->是否显示该工具，还有一些别的属性可以自己再使用的时候查询API文档。
  • restore：配置项还原。主要属性是show->是否显示该工具。
  • dataView：数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。show->是否显示该工具，readOnly->是否不可编辑，optionToContent->自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串，backgroundColor->数据视图浮层背景色。
  • dataZoom：数据区域缩放。目前只支持直角坐标系的缩放（这里的含义就是柱状体，折线图可以缩放，但是像饼状图就不能缩放）。show->是否显示该工具。
  • magicType：动态类型切换。show->是否显示该工具，type->这是个数组，启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。

4.　　代码展示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>ECharts练习</title>

        <script type="text/javascript" src="js/echarts.min.js"></script>

    </head>

    <body>

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

        <div id="main" style="width: 600px;height:400px;"></div>

        <script type="text/javascript">

            // 基于准备好的dom，初始化echarts实例

            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据

            var option = {

            title: {

                text: '销量柱状图', //标题文本内容

            },

            toolbox: { //可视化的工具箱

                show: true,

                feature: {

                    dataView: { //数据视图

                        show: true

                    },

                    restore: { //重置

                        show: true

                    },

                    dataZoom: { //数据缩放视图

                        show: true

                    },

                    saveAsImage: {//保存图片

                        show: true

                    },

                    magicType: {//动态类型切换

                        type: ['bar', 'line']

                    }

                }

            },

            tooltip: { //弹窗组件

                show: true

            },

            xAxis: {

                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);

        </script>

    </body>

</html>

5.　　图片展示：

　　   整体显示

　　   数据视图：

　　   区域缩放：

　　   保存图片：点击点击图中红色方框选中的“下载”按钮

　　   切换为折线图：点击图中红色方框选中的”折线图“状按钮

6.　　总结：这里大致的学习了一下ECharts中的工具栏，我自己也是刚开始学习的，还有一些工具的参数文章中都没有介绍，大家在使用的过程中如果有需要的参数可以查看ECharts的API文档。

ECharts学习（3）--toolbox（工具栏）的更多相关文章

  1. echarts学习总结

    ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...

  2. Echarts学习之路2（基本配置项）

    title:标题组件,包含主标题和副标题. title:{ text:"",//主标题 link:"",//主标题文本超链接 target:"&quo ...

  3. Echarts学习记录——如何去掉网格线及网格区域颜色

    关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...

  4. Echarts学习记录——如何给x轴文字标签添加事件

    Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...

  5. echarts学习（上）

    echarts 学习之路 学习思路 初识echarts 编写自己的echarts图表 根据需求编写工作中的echarts图表[进阶篇] github地址:https://github.com/liso ...

  6. echarts学习笔记(一)

    echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...

  7. ECharts学习（1）--toolbox（工具栏）

    1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...

  8. ECharts学习总结（二）-----图表组件漏斗图(funnel)

    今天在学习ECharts时,想要在ECharts图表的原生态Demo中抠出漏斗图,却不知如何下手,经过一番研究,特总结如下: 首先我们需要这样做 1.拷贝出两个js文件:esl.js 和echarts ...

  9. Echarts学习总结（一）-----柱状图

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...

随机推荐

  1. C#基础-MD5验证

    一.前言 MD5验证主要用于更新文件功能方面,服务器告知客户端要下载哪些更新文件并提供给客户端其MD5值,客户端从服务器将更新文件下载到本地并计算下载文件的MD5值,将本地接收的MD5值与服务器提供的 ...

  2. [C1] 实现 C1FlexGrid 撤销还原功能

    采用设计模式中的"命令模式"实现 C1FlexGrid 的撤销还原功能,那就先从命令模式简单介绍开始吧. 一  命令模式 命令模式属于对象的行为型模式,将一个请求封装为一个对象,从 ...

  3. 三个linux系统共存，修改默认启动

     一个mint,一个ubuntu,想要默认启动ubuntu,那么咱们这么来:修改启动顺序,我们需要修改Ubuntu的GRUB配置文件.使用常见的编辑程序如"gedit"就可以很方便 ...

  4. ES5概述（ECMAScript262/5.1）

    ES5概述(ECMAScript262/5.1) 本文参考:ES5概述 ECMAScript 是基于对象的: 基本语言和宿主设施都由对象提供,ECMAScript 程序是一组可通信的对象.ECMASc ...

  5. 【搬砖】安卓入门（3）- Java开发编程基础--循环控制语句

    04.01_Java语言基础(循环结构概述和for语句的格式及其使用) A:循环结构的分类 for(初始化表达式;条件表达式;循环后的操作表达式) { 循环体; } 复制代码 B:循环结构for语句的 ...

  6. OuNews 简单的新闻客户端应用源码

    一直想练习MVP模式开发应用,把学习的RxJava.Retrofit等热门的开源库结合起来,于是写了这么一款新闻阅读软件, 有新闻.图片.视频三大模块,使用Retrofit和Okhttp实现无网读缓存 ...

  7. linux Mysql 安装及配置

    1.准备 cmake-3.6.0.tar.gz bison-3.0.4.tar.gz mysql-5.7.13.tar.gz (http://dev.mysql.com/get/Downloads/M ...

  8. JSON金额解析BUG的解决过程

    [原创申明:文章为原创,欢迎非盈利性转载,但转载必须注明来源] 这是在我们开发的一个支付系统中暴露的一个BUG,问题本身比较简单,有意思的是解决问题的过程.将过程分享出来,希望能够对大家有所帮助. 一 ...

  9. Node.js 教程 02 - 经典的Hello World

    前言: Node.js的介绍.安装及配置,上一节都已经介绍过了,如果有不清楚的也可以留言或者直接问度娘. 本节: 本节主要以一个简单的例子简单体验一下Node.js,用到了两种方法.下面会介绍. 总之 ...

  10. Javassist 通用工具之 CodeInjector

    Javassist 通用工具之CodeInjector 最近在做一个APM项目,要在运行时代码修改.目前常用修改的几种工具有:ASM.BCEL.Javassist.经过对比,项目中采用了Javassi ...