toolbox

工具栏。内置有导出图片数据视图动态类型切换数据区域缩放重置五个工具。

feature各工具配置项。具体显示功能

1、saveAsImage 保存为图片。

2、restore 还原

3、dataView 数据视图

4、dataZoom 缩放视图

5、magicType 动态类型切换

代码如下:

toolbox:{
feature:{
  saveAsImage:{
    show:true
  },
  restore:{
    show:true
  },
  dataView:{
    show:true
  },
  dataZoom:{
    show:true
  },
  magicType:{
    type:['line','bar']
    }
  }
},

1、dataView

  数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新

如将衬衫改为20,点击右下角刷新,可看到改变的数据,但这不会改变本质数据,数据库数据还是原先设置的,通过还原,和刷新都会回到最初数据。

2、dataZoom

数据区域缩放。目前只支持直角坐标系的缩放。

可以具体放大某个区域,只需要在区域内画个框,如不满足观看,可继续画框放大。可通过区域缩放还原和restore都可回的最初的设置,

如放大“羊毛衫、雪纺衫、裤子、高跟鞋”

3、restore

配置项还原。

如上面的dataView、dataZoom设置的内容,点击这个还原,就回到最初的设置。

ehcarts之toolbox,工具栏的更多相关文章

  1. 使用Echarts实现动态曲线图表

    最近做的一个在线气象观测网站要实现一个需求:使用图表展示最近五天温湿度等气象要素的曲线变化 具体效果参考:http://www.weatherobserve.com/showInfoIndex.jsp ...

  2. echarts一个页面动态加载两张不同图表数据

    参考 http://www.stepday.com/topic/?877 http://blog.csdn.net/for_china2012/article/details/45167161 // ...

  3. 记录下ECharts的一些功能

    用到ECharts记录下一些功能免得以后找文档找不到. 这个博客对ECharts讲解很全面 http://www.stepday.com/my.stepday/?echarts // 使用 requi ...

  4. 深入浅出ECharts系列 (二) 折线图

    深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载 ...

  5. echarts_部分图表配置_堆叠折线图

    echarts基本图表使用: 1.获取包裹元素(var myChart = echarts.init(document.getElementById('thisId'));)2.设置option(op ...

  6. Vue使用Echarts以及Echarts配置分享

    一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...

  7. echarts 点击方法总结,点任意一点获取点击数据,在多图联动中用生成标线举例

    关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击点击任意一个图上任意一点 ...

  8. 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...

  9. Echarts学习之路2(基本配置项)

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

随机推荐

  1. 【Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性——位置设置偏向

    LinearLayout有两个非常相似的属性: android:gravity与android:layout_gravity. 他们的区别在于: android:gravity 属性是对该view中内 ...

  2. JAVA 模块

    commons-lang3 maven repository, 项目主页 fastjson maven repository, 项目主页 fastjson 是阿里巴巴开源的序列化和反序列化 JSON ...

  3. Linq的日期比较

    在一个项目中要进行linq的日期比较,从一个表的时间类型字段中取出日期,比较是否为当天日期.语句如下: epark_middlelayerEntities eparkMiddle = new epar ...

  4. java之this关键字

    this使用范围 1.在类的方法定义中使用的this关键字代表调用该方法对象的引用. 2.当必须指出当前使用方法的对象是谁时,要使用关键字this. 3.有时使用this可以处理方法中成员变量和参数重 ...

  5. MongoDB查询经典方式

    原文地址:http://www.cnblogs.com/stephen-liu74/archive/2012/08/03/2553803.html 1.  基本查询:    构造查询数据.    &g ...

  6. 解析式/推导式, 生成器 datetime 内建函数

    列表解析式(List Comprehension) 语法: [返回值 for 元素 in 可迭代对象 if 条件] 使用中括号[],内部是for循环,if条件可选. 返回一个新的列表. 列表解析式的作 ...

  7. Windows内存管理的方式

    一.内存的概念 1. 物理内存:即插在主板上的内存条.他是固定的,内存条的容量多大,物理内存就有多大(集成显卡系统除外). 但是如果程序运行很多或者程序本身很大的话,就会导致大量的物理内存占用,甚至导 ...

  8. 组播和广播的概念,IGMP的用途

    1.组播和广播的概念 1) 组播 主机之间的通讯模式,也就是加入了同一个组的主机可以接收到此组内的所有数据,网络中的交换机和路由器只向有需求者复制并转发其所需数据. 主机可以向路由器请求加入或退出某个 ...

  9. silverlight 对ChildWindow返回给父窗体值的理解(转载)

    这篇文章是我对ChildWindow的理解,举例说明: 有时候在项目中需要弹出子窗体进行一些操作,然后将操作的值返回到父窗体中. 下图是子窗体的界面(比较粗糙....) 下面贴出其代码: 子窗体前台代 ...

  10. Redis遍历所有key的两个命令 -- KEYS 和 SCAN

    当我们需要遍历Redis所有key或者指定模式的key时,首先想到的是KEYS命令: KEYS pattern   官网对于KEYS命令有一个提示: KEYS 的速度非常快,例如,Redis在一个有1 ...