您现在的位置:首页 >> 前端 >> 内容

echarts入门教程

时间:2017/3/9 9:14:00 点击:

  核心提示:echarts入门教程本文介绍的是Echarts3的基本入门的内容。Echarts提供的组件 Title组件 效果图: legend图例组件图例组件展现了不同系列的标记(symbol),颜色和名字。可...

echarts入门教程

本文介绍的是Echarts3的基本入门的内容。

Echarts提供的组件

echarts入门教程

Title组件

echarts入门教程

效果图:

echarts入门教程

legend图例组件

图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示 发送到

echarts入门教程

tooltip提示框组件

常用属性:

show,showContent,trigger,triggerOn,alwaysShowContent,showDwlay,

hideDelay,enterable,position,transitionDuration,formatter,

backgroundColor,borderColor,borderWidth,padding

textStyle:{

color,fontStyle.fontWeight,fontFamily,fontSize,extraCssText

}

grid 网格组件

直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)

echarts入门教程
echarts入门教程
echarts入门教程

常用的属性:

show zlevel z left top right bottom width height containlabel (刻度标签)

backgroundColor

borderColor

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

VisualMap视觉映射组件

视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)视觉映射组件.

常见的属性:type,min,max,range,calculabe.realtime,inverse,itemWidth,

itemHeight,text,textGap,dimension,seriesIndex,hoverLink,

inRange,outOfRange,splitNumber,textGap.intemGap.itemSymbol,

zlevel z left top right bottom orient,padding

echarts入门教程

Orient:Vertical,horizonal,Horizontal,

toolbox工具栏组件

toolbox:{

feature:{

saveAsImage:{},restore:{},dataView:{},dataZoom:{},magicType:{},brush:{}

}

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

echarts入门教程

magicType:{type:['line', 'bar', 'stack', 'tiled']}

geo地理坐标系组件

地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。

echarts入门教程

timeline 组件

timeline 组件,提供了在多个 ECharts option 间进行切换、播放等操作的功能。

echarts入门教程

radar 雷达组件

雷达图坐标系与极坐标系不同的是它的每一个轴(indicator 指示器)都是一个单独的维度,可以通过 name、axisLine、axisTick、axisLabel、splitLine、 splitArea 几个配置项配置指示器坐标轴线的样式。

echarts入门教程

Tags:EC CH HA AR 
作者:网络 来源:u013808809