当前位置：
  1. 首页
  2. echarts
  3. 正文
本文介绍: 原生图形元素自建，支持的图形元素包括 image、text、circle、sector、ring、polygon、polyline、rect、line、bezierCurve、arc、group。dataZoomInside，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、滚轮、手指滑动在缩放或漫游坐标系。数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。区域选择组件，可以选择图中一部分数据，从而便于向用户展示被选中数据、或他们的一些统计计算结果。

【Echarts】配置项归纳

一、title

标题组件，有主标题、副标题。

二、legend

图例组件。

三、grid

直角坐标系内绘制网格，单个grid内最多防止上下2个X轴、2个Y轴。

四、xAxis/yAxis

指标坐标系 grid 中的X轴。

五、polar

极坐标系，可用于散点图、折线图。每个极坐标系拥有一个角度轴和一个半径轴

六、radiusAxis

极坐标系的径向轴

  • polarIndex：径向轴所在的极坐标系的索引，默认使用第一个极坐标系。
  • type：坐标轴类型。参数有 value（数值轴）、category（类目轴）、time（时间轴）、log（对数轴）
  • id、name、nameLocation、nameTextStyle、nameGap、nameRotate、inverse、boundaryGap、min、max、scale、splitNumber、minInterval、maxInterval、interval、logBase、silent、triggerEvent、axisLine、axisTick、minorTick、axisLabel、splitLine、minorSplitLine、splitArea、data、axisPointer、animationXXX、zlevel、z 同上。

七、angleAxis

极坐标系的角度轴

  • startAngle：起始刻度的角度，默认90度，即圆心的正上方，0度为圆心的正右方。数值
  • clockwise：默认顺时针，布尔值
  • id、polarIndex、type、…同上

八、radar

雷达图坐标系组件，只适用于雷达图

九、dataZoom

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或概览数据整体，或去除离群点的影响

1. 内置型数据区域缩放组件

dataZoomInside，内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、滚轮、手指滑动在缩放或漫游坐标系。

2. 滑动条型数据区域缩放组件

dataZoomSlider，有单独的滑动条，用户在滑动条上进行缩放或漫游。

3. 框选型数据区域缩放组件

dataZoomSelect，提供一个选框进行数据区域缩放，配置项在 toolbox 中。

十、tooltip

提示框组件，可以在多个地方设置。全局、坐标系中、系列中、系列的每个数据项中。

十一、axisPointer

坐标轴指示器的全局公用设置，同 tooltip 的 axisPointer

  • triggerTooltip：是否触发 tooltip
  • value：当前的value，可以决定指示器初始位置
  • status：状态，show、hide
  • link：不同轴的 axisPointer 可以联动，同步一起活动。
  • triggerOn：触发提示框条件

十二、toolbox

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

十三、brush

区域选择组件，可以选择图中一部分数据，从而便于向用户展示被选中数据、或他们的一些统计计算结果。
支持的图表类型有 scatter、bar、candlestick

  • brushLick：不同系列间，选中项可以联动
  • brushType：刷子类型，参数有 rect（矩形）、polygon（任意形状）、lineX（横向）、lineY（纵向）
  • brushMode：刷子模式，参数有 single（单选）、multiple（多选）
  • transformable：已经选好的选框是否可以被调整形状或平移。
  • brushStyle：选框的样式，对象，borderWidth、color、borderColor
  • throttleType：没用过
  • throttleDelay：没用过
  • removeOnClick：单选时，是否支持单击清除所有选框
  • inBrush：选中范围中视觉元素。没用过
  • outOfBrush：选中范围外的视觉元素，没用过
  • id、toolbox、seriesIndex、geoIndex、xAxisIndex、yAxisIndex、z

十四、geo

地理坐标系组件

十五、parallel

平行坐标系，是一种常用的可视化高维数据的图表

  • layout：和 orient 类似，布局方式，参数有 horizontal（水平排布各个坐标轴）、vertical（数值排布各个坐标轴）
  • axisExpandable：是否允许点击折叠axis
  • axisExpandCenter：初始时，以哪个轴为中心展开，这里给出轴的index
  • axisExpandCount：初始时，有多少个轴会处于展开状态。
  • axisExpandWidth：展开状态轴的间距是多少
  • axisExpandTriggerOn：触发折叠，参数有 click、mousemove
  • parallelAxisDefault：配置多个 parallelAxis时，有些值一样的属性，如果书写多遍则比较繁琐，可以放在这里面。
  • id、zlevel、z、left、top、right、bottom、width、height

十六、parallelAxis

平行坐标系的坐标轴

  • dim：坐标轴的维度序号
  • parallelIndex：坐标轴对应哪个坐标系
  • realtime：坐标轴刷选时，是否实时更新视图
  • type：坐标轴类型，参数有 value、category、time、log
  • id、areaSelectStyle、name、nameLocation、nameTextStyle、nameGap、nameRorate、inverse、boundaryGap、min、max、scale、splitNumber、minInterval、maxInterval、interval、logBase、silent、triggerEvent、axisLine、axisTick、minorTick、axisLabel、data、animationXXX

十七、singleAxis

单轴，可以被应用到散点图中展示一维数据

十八、timeline

timeline组件，提供了多个 Echarts option 间进行切换，播放等操作的功能

十九、graphic

原生图形元素自建，支持的图形元素包括 image、text、circle、sector、ring、polygon、polyline、rect、line、bezierCurve、arc、group

  • id
  • elements：里面是所有图形元素的集合。对象数组
graphic:{
	elements: [
		{type: 'rect', ...},
		{type: 'circle', ...}
	]
}

1. group

group 是唯一的可以有子节点的容器，可以用来整体定位一组图形元素

2. image

  • type：image
  • progressive：是否渐进式渲染
  • style
  • focus：高亮图形时，是否淡出其他数据的图形以达到聚焦的效果，可选参数 none（默认值，不淡出其他图形）、self（只聚焦当前高亮的数据图形）、series（聚焦当前高亮的数据所在的系列的所有图形）
  • blurScopr：在开启 focus 时，可通过 blurScope 配置淡出的范围。可选参数 coordinateSystem（淡出范围为坐标系）、series（淡出范围为系列）、global（淡出范围为全局）
  • 其余同上

3. text

  • type：text
  • style
  • 其余同上

4. rect

矩形

  • type：rect
  • shape
    • x：图形元素的左上角在父节点坐标系中的横坐标值
    • y：同上
    • width、height
    • r：设置圆角矩形，数值、数值数组
    • transition：没用过
  • style
  • 其余同上

5. circle

圆

  • type：circle
  • shape
    • cx：圆形元素的中心在父节点坐标系中的横坐标值
    • cy：同上
    • r：外半径
    • transition
  • 其余同上

6. ring

圆环

  • type：ring
  • shape
    • cx：圆形元素的中心在父节点坐标系中的横坐标值
    • cy：同上
    • r：外半径
    • r0：内半径
    • transition
  • 其余同上

7. sector

扇形

  • type：sector
  • shape
    • cx：圆形元素的中心在父节点坐标系中的横坐标值
    • cy：同上
    • r：外半径
    • r0：内半径
    • startAngle：开始弧度
    • endAngle：结束弧度
    • clockwise：是否顺时针
    • transition
  • 其余同上

8. arc

圆弧

  • type：arc
  • 同扇形

9. polygon

多边形

  • type：polygon
  • shape
    • points：点列表，用于定义形状。二维数组
    • smooth：是否平滑曲线，数值、spline
    • smoothConstraint：是否将平滑曲线约束在包围盒中
    • transition
  • 其余同上

10. polyline

折线

11. line

直线

  • type：line
  • shape
    • x1：开始点的x值
    • y1：开始点的y值
    • x2：结束点的x值
    • y2：结束点的y值
    • percent：线画到百分之多少就不画了，0~1
    • transition
  • 其余同上

12. bezierCurve

二次或三次贝塞尔曲线

  • type：bezierCurve
  • shape
    • x1：开始点的x值
    • y1：同上
    • x2：结束点的x值
    • y2：同上
    • cpx1：控制点x值
    • cpy1：同上
    • cpx2：第二个控制点x值
    • cpy2：同上
    • percent：线画到百分之多少就不画了，0~1
    • transition
  • 其余同上

二十、calendar

日历坐标系组件，可以在热力图、散点图、关系图中使用日历坐标系

  • range：日历坐标的范围，支持 某一年（数值型）、某个月（2017-02）、某个区间（字符串数组）
  • cellSize：日历每格框的大小，数值，数组
  • dayLabel：日历坐标中星期轴的样式
    • firstDay：一周从周几开始，默认周日开始
    • margin：星期标签与轴线之间的距离
    • position：星期的位置，在星期轴的开始或结尾。start、end
    • nameMap：星期显示的效果，默认为 en
    • show、textStyle
  • monthLabel
  • yearLabel
  • id、zlevel、z、left、top、right、bottom、width、height、orient、splitLine、itemStyle、silent

二十一、dataset

数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。

二十二、series

另外写一篇归纳

【Echarts】配置项 之 series

二十三、darkMode

是否是暗黑模式，默认根据背景色 backgroundColor 的亮度自动设置。通常被用于主题中。

二十四、color

调色盘颜色列表，如果系列没有设置颜色，则会依次循环从列表中取颜色作为系列颜色。

二十五、backgroundColor

背景色，默认无背景

二十六、stateAnimation

状态切换的动画配置，支持在每个系列里设置单独针对该系列的配置。

  • duration：状态切换的动画时长，设为0则关闭动画
  • easing：状态切换的动画缓动

二十七、blendMode

图形的混合模式，默认是 source-over，支持每个系列单独设置。没用过

二十八、hoverLayerThreshold

图形数量阈值，决定是否开启单独的hover层，在整个图表的图形数量大于该阈值时开启单独的hover层。没用过

二十九、useUTC

是否使用 UTC 时间，默认为false。

三十、media

媒体查询，移动端自适应

附一、rich

  • 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

  • 设置的属性都与字体样式textStyle有关。

  • 结构：

    rich:{
	<name>:{
		...
	}
}

  • 示范：

    subtext: "{a|我是a}n{b|我是b}",
subtextStyle:{
  rich: {
    a: {
      width: 500,
      align: "center",
      color: 'red',
      lineHeight: 10
    },
    b: {
      color:"blue"
    }
  }
}

    在这里插入图片描述

附二、各种style

1. 相同的属性

  • color
  • border
    • borderColor、borderWidth、borderType、borderDashOffset、borderCap、borderJoin、borderMiterLimit。
    • lineStyle 没有 border 属性，因为 line 就是 border
    • itemStyle 直接写 borderColor、borderWidth…不用加前缀
    • textStyle 需要写加 text 前缀，textBorderColor、textBorderWidth…
  • shadow
    • shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY。
    • lineStyle、itemStyle 直接写，不加前缀
    • textStyle 需要加 text 前缀
  • width、height
    • textStyle、lineStyle 有
    • itemStyle 没有

2. textStyle

  • 都是字体样式
    • fontStyle
    • fontWeight
    • fontFamily
    • fontSize
    • LineHeight
    • overflow、ellipsis
    • rich

3. itemStyle

  • 每一项的样式

4. lineStyle

  • 线条样式，基本和 border 一样

5. areaStyle

  • 分隔区域样式，在 坐标系 中存在
    • color
    • shadowXXX
    • opacity

原文地址:https://blog.csdn.net/realoser/article/details/131444354

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_14955.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 Echarts实现中国地图、省市地区地图
下一篇 微信小程序使用ECharts的示例详解

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。