---恢复内容开始---

echart.js的使用与API

1.echart.js的使用:

第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echart的官方首页下载最新最全面的js文件,官网:http://echart.baidu.com);

<script src="./js/echarts.js"></script>

第二步:并在body中创建一个具备大小的dom(div);

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

第三布:基于创建好的DOM,创建script,并初始化echart图表;

var mychart = echart.init(document.getElementById('main'));

第四步:在script标签中创建选项并布置参数;

var option={//自定义参数,见下文参数};

第五步:布置完参数后,在最后为echart对象加载数据

mychart.setOption(option);

2.API

  1.tooltip:提示框,鼠标悬浮交互时的信息提示

    参数:1.show:显示策略,默认为true(显示),可选false(隐藏);

         2.trigger:触发类型,默认为item(触发),可选axis(自定义触发);

       3.zlevel:一级层叠控制,默认值为1,渲染canvas,相同的会在同一个canvas上渲染,但不推荐过多的设置,        

            canvas对象增多会消耗更多的内存和性能,所以大部分可通过二级层叠来控制

       4.z:二级层叠控制,默认值8,相同的zlevel上z越高越靠顶层。

       5.showContent:默认为true,在show或axisPointer触发但不显示内容的时候,可以配置为false(隐藏)

       6.position:位置指定,默认显示坐标为输出参数,用户指定的新坐标为输出返回

             如:function([x,y]){return [newX,newY]}

       7.formatter:内容格式器,默认值为null,,支持异步回调

       8.islandFormatter:拖拽重计算独有,数据孤岛内容格式器

       9.showDelay:显示延迟,默认值为20,单位ms,添加显示延迟可以避免频繁切换。

       10.hideDelay:隐藏延迟,默认值为100,单位是ms

       11.transitionDuration:动画变换时长,默认值为0.4,单位是s,改变交互体验

       12.enterable:false 鼠标是否可进入详情气泡中,默认为false,如增加详情交互,如添加链接等,可设置true

       13.backgroundColor:提示背景颜色,默认‘rgba(0,0,0,0.7)’,默认透明度为0.7的黑色

       14.borderColor:提示边框颜色,默认为#333;

       15.borderRadius:提示边框圆角,默认为4,单位为px

       16.borderWidth:提示边框线宽,默认为0,单位为px

       17.padding:提示内边距,默认各方向为5,接受数组分别设定各边距同css

       18.textStyle:文本样式,默认为白色,{color:'#fff'}

       19.axisPointer:坐标轴指示器,默认type:line,可选‘line\cross\shadow\none’ 对应设定style生效

               如:type:'line',lineStyle:{},crossStyle:{},shadowStyle:{}

  2.legend:图例

       1.data:图例内容数组,每一项代表一个系列的name,根据该值索引series中同名系列所用的图标类型和item

           和itemStyle,如果索引不到,该item将默认为没启动状态,参数name,textStyle,icon

       2.orient:布局方式,默认为horizontal水平布局,可选vertical竖直。

        3.x:安放位置,默认全图居中,可选:left,right

       4.y:安放位置,默认全图顶端,可选top,bottom,center

       5.itemGap:各个item的间距,默认为10,单位px,配合orient布局

       6.itemWidth:图例图形的宽度,默认为20px.

       7.itemHeight:图例图形的高度,默认为14px

       8.textStyle:默认值设定图例文字颜色,color:auto,默认为{color:'#333'}

       9.selectedMode:选择模式,默认开启图例开关,true,可选single,multiple,true,

       10.selected:配置默认选中状态,可配合legend,selected事件做动态数据载入

       11.formatter:文本格式器,默认为null

       12.show:显示策略,默认为true(显示),可选false(隐藏)

       13.zlevel:一级层叠控制,默认值为1,渲染canvas,相同的会在同一个canvas上渲染,但不推荐过多的置,        

            canvas对象增多会消耗更多的内存和性能,所以大部分可通过二级层叠来控制

       14.z:二级层叠控制,默认值8,相同的zlevel上z越高越靠顶层。

       15.borderRadius:提示边框圆角,默认为4,单位为px

       16.borderWidth:提示边框线宽,默认为0,单位为px

       17.padding:提示内边距,默认各方向为5,接受数组分别设定各边距同css

       18.borderColor:提示边框颜色,默认为#333;

  3.series:驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,确定适用类型:

       1.name:系列名称,如启用ledgend,改制将被legend.data索引相关

       2.type:图表类型,必要参数!为空或不支持类型,则该系列数据不被显示,可选为:

           'line(折线图)','bar(柱状图)','scatter(散点图)','k(K线图)','pie(饼图)','radar(雷达图)','chord(和弦图)'

           'force(力导向布局图)','map(地图)'

       3.data:数据,默认值[]

       4.zlevel:一级层叠控制。

       5.z:二级层叠控制

       6.clickable:数据图形是否可点击,默认开启,true,如果没有click事件响应可以关闭

       7.markPoint:标注

       8.markLine:标线

       

       不同type有个别属性不同或增加

  4.title:标题,每隔图标最多仅有一个标题控件,每隔标题控件可设主副标题

       1.show:显示策略,默认为true(显示),可选false(隐藏);

         2.text:主标题文本,默认值‘’,‘\n’指定换行;

       3.zlevel:一级层叠控制,默认值为1,渲染canvas,相同的会在同一个canvas上渲染,但不推荐过多的设置,        

            canvas对象增多会消耗更多的内存和性能,所以大部分可通过二级层叠来控制

       4.z:二级层叠控制,默认值8,相同的zlevel上z越高越靠顶层。

       5.link:主标题文本超链接

       6.target:指定窗口打开主标题超链接,默认null,支持self,blank,不指定等同为blank(新窗口)

       7.subtext:副标题文本,‘\n’指定换行、

       8.sublink:副标题文本超链接

       9.subtarget:指定窗口打开副标题超链接,默认null,支持self,blank,不指定等同为blank(新窗口)

       10.textAlign:水平对齐方式,默认根据x设置自动调整,left,right,center

       11.backgroundColor:标题背景颜色,默认透明

       12.borderColor:标题边框颜色,默认为#ccc

       13.borderWidth:标题边框线宽,默认为0,单位px

       14.padding:提示内边距,默认各方向为5,接受数组分别设定各边距同css

       15.itemGap:主副标题纵向间隔,默认为10,单位px

       16.textStyle:主标题文本样式,接受数组分别设定各边距同css

       17.subtextStyle:副标题文本样式

       18.x:水平安放位置,默认为left,可选left,center,right

       19.y:垂直安放位置,默认为top,可选top,bottom,center

  5.xAxis,yAxis:直角坐标系中横纵轴

           坐标轴类型,横轴默认为类目型‘category’.纵轴默认为数值型'value'如:

            xAxis:[{type:'category',data:['衬衫','羊毛衫','雪纺衫','裤子']},],

            yAxis:[{type:'value'}]

  6.axis:坐标轴有三种类型:

  • 类目型:需要指定类目列表,坐标轴内有且仅有这些指定类目坐标
  • 数值型:需要指定数值区间,不指定时则自定计算数值范围,坐标轴内包含数值区间内容全部坐标
  • 时间型:时间型坐标轴用法同数值型,只是目标处理和格式化显示时会自动转变为时间,并且随着时间跨度的不同自动切换需要显示时间粒度

       1.type:必填,纵坐标轴为value,横坐标轴为category

       2.show:显示策略,默认为true(显示),可选false(隐藏)

       3.zlevel:一级层叠控制。

       4.z:二级层叠控制

       5.position:坐标轴类型,横坐标默认为bottom,纵坐标默认为left,  可选值bottom,top,left,right

       6.name:坐标轴名称,默认为空

       7.nameLocation:坐标抽名称位置,默认为end,可选start

       8.nameTextStyle:坐标轴名称文字样式,默认取全局配置,颜色跟随axisLine主色,false则顶头

       9.boundaryGap:类目其实和结束两段空白策略,默认true空,false则顶头

       10.boundaryGap:坐标轴两段空白策略,默认值[0,0],可选[原始最小值和最终的差距,原始最大值和最终的差距]

       11.min:指定的最小值,默认为null,会自动根据数值调整,指定后忽略boundaryGap[0]

       12.max: 指定的最大值,默认为null,会自动根据数值调整,指定后忽略boundaryGap[1]

       13.scale: 脱离0值比例,放大聚焦到最终_min,_max区间,

       14.splitNumber:分割段数,不指定时根据min、max算法调整

       15.logLabelBase:axis.type===‘log’时生效。指定时axisLabel显示指数形式如4²,不指定是为普通形式如:1000,

       16.logPositive:axis.type===‘log’时生效,指定是否使用反向log数轴,默认自适应,即如果value全为负值则为false否则为true

       17.axisLine:坐标轴线,默认不显示

       18.axisTick:坐标轴小标记,默认不显示

       19.axisLabel:坐标轴文本标签。

       20.splitLine:分割线,默认显示

       21.splitArea:分割区域,默认不显示

       22.data:类目列表

  7.timeline:时间轴,每隔图标最多仅有一个时间轴控件

       1.type:模式是时间类型,默认为time,可选为‘number’

       2.notMerge:时间轴上多个option切换时,是否进行merge操作,同setOption第二个参数

       3.realtime:拖拽或点击改变时间轴是否实时显示, 默认为true,在不支持canvas的浏览器中强制false

       4.autoPlay:是否自动播放,默认为false

       5.loop:是否循环播放,默认为true

       6.playInterval:播放时间间隔,默认2000,单位ms

       7.controlPosition:播放器位置,默认为left,可选left、right、none

       8.x,y,x2,y2:时间轴横纵坐标的的左上角,时间轴横纵坐标的右上角

       9.width:时间轴的宽度,默认自适应

       10.height:时间轴的高度,默认50,单位%;

       11.lineStyle:时间轴轴线样式,lineStyle控制线条样式

       12.label:抱歉文本

       13.checkpointStyle:时间轴当前点

       14.controlStyle:时间轴控制器样式

       15.symbol:轴点symbol,同serie,symbol

       16.symbolSize:轴点symbol,同serie,symbolSize

       17.currentIndex:当前索引位置,对应option数组,用于指定特定系列

       18.data:时间轴列表,同时也是轴label内容

       以上为常用api,待我再次学习继续总结~

       

echart.js的使用与API的更多相关文章

  1. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  2. EChart.js 笔记一

    一直对数据可视化比较感兴趣,当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座,够震撼,将数据之美展现得淋漓尽致. 国内的前端数据可视化插件中,echart.js 算是热度很高的,也容易上手,算 ...

  3. 今天工作中遇到的问题!echart.js

    echart.js 引用的时候, 配置文件和引用的echart.js  应该放在main.js的后面,带有window.onload的js后面.这样的话,不会阻止echar.js的渲染.

  4. ArcGIS Js/Flex等前端API(Query(StatisticDefinition)时)针对SDE的SHAPE.AREA/SHAPE.LEN知道查询无效,而对GDB的SHAPE_Area/SHAPE_Length有效探索。

    FIeld 'SHAPE.AREA' and 'SHAPE.LEN' of SDE For Oracle,Field 'SHAPE_Area' and 'SHAPE_Length' of gdb(ge ...

  5. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  6. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  7. EChart.js 笔记二

    交互组件 Echart.js 中交互组件比较多.例如: legend(图例).title(标题组件).visualMap(视觉映射组件).dataZoom(数据缩放组件).timeline(时间线组件 ...

  8. Web3.js 0.20.x API 中文版翻译

    文档原始链接为:https://web3.learnblockchain.cn/0.2x.x/,欢迎大家前往查阅,本文只是节选开头部分的介绍及API列表索引,以下为翻译正文: 为了开发一个基于以太坊的 ...

  9. 如何在vue2.0项目中引用element-ui和echart.js

    1 项目中怎样添加elment-ui 和 echart.js 1.1直接在packjson 里面的 dependencies 配置 "element-ui": "^1.3 ...

随机推荐

  1. AppcompatActivity闪退问题解决方案

    apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "23.0. ...

  2. 剑指offer题目21-30

    面试题21:包含min函数的栈 import java.util.Stack; public class Solution { private Stack<Integer> stack = ...

  3. eclipse Juno Indigo Helios Galileo 版本

    Galileo Ganymede Europa 这些名字代表eclipse不同的版本 2001年11月7日 ,Eclipse 1.0发布  半年之后,2002年6月27日Eclipse进入了2.0时代 ...

  4. Slave failed to initialize relay log info structure from the repository

    现象 查看slave 服务状态 show slave status\G; 错误 Last_Errno: 1872 Last_Error: Slave failed to initialize rela ...

  5. ICE系列之2——ICE的服务与好处

    ice服务: IcePack         我们在第 12 页提到过, IcePack 是 Ice 的定位服务,用于在使用间接绑定时把符号性的 (symbolic)适配器名解析为协议-地址对. 除了 ...

  6. 学习python之练习(二)

    #2.已知a1=1,a2=2,an=a(n-1)+a(n-2)(n>=3),求数列{a1,a2,a3....an}的总和 import math arr = [0]*100 num = 0 fo ...

  7. msyql 数据库恢复相关

    通过bin日志恢复数据 一.通过bin日志生成 sql #/usr/local/mysql/bin/mysqlbinlog -d dbname --base64-output=DECODE-ROWS ...

  8. pro生成sln

    跳转到对应的工程目录,通过执行如下的命令:qmake -tp vc 命令实现

  9. PHP程序员的技术成长规划(转)

    第一阶段:基础阶段(基础PHP程序员) 重点:把LNMP搞熟练(核心是安装配置基本操作) 目标:能够完成基本的LNMP系统安装,简单配置维护:能够做基本的简单系统的PHP开发:能够在PHP中型系统中支 ...

  10. (原创)即使最可怕的自然力量,也不失美丽——火山喷发(摄影,欣赏)

    文中图片摘自腾讯文化:www.cal.qq.com 1.Abstract     最可怕的力量也潜含着最美丽的风景奇观,虽然不能亲眼目睹,但透过大师的视角,一样也能体会到自然力量撼动的美丽. 2.Co ...