首页 > 其他分享 >Echarts常用参数

Echarts常用参数

时间:2023-08-18 14:44:06浏览次数:42  
标签:... 常用 false 配置 图例 参数 提示框 true Echarts

一些以后应该能用到的参数

option = {

title:{ //图表的标题配置

text: '主标题文本',

subtext: '副标题文本',

show: true //是否展示标题

},

tooltip: { // 提示框配置

trigger: 'item', // 触发类型,可选值:'item'(数据项触发), 'axis'(坐标轴触发), 'none'(不触发)

axisPointer: {...}, // 坐标轴指示器配置,用于 axis 类型的触发器

showContent: true, // 是否显示提示框浮层, 默认为true

alwaysShowContent: false, // 鼠标移出图形区域后是否一直显示提示框内容

triggerOn: 'mousemove', // 提示框触发的条件,可选:'mousemove', 'click', 'mousemove|click', 'none'

confine: false, // 是否将 tooltip 框限制在图表的区域内

formatter: function(params) {...}, // 提示框内容格式化器,支持回调函数自定义提示框内

backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色

borderColor: '#333', // 提示框浮层的边框颜色

borderWidth: 0, // 提示框浮层的边框宽度

padding: 5, // 提示框浮层的内边距

textStyle: {...}, // 提示框文本的样式

position: function(pos, params, dom, rect, size) {...}, // 提示框的位置,支持回调函数自定义位置

extraCssText: 'width: 100px;'// 额外的 CSS 样式文本,可用于自定义样式// ... 其他配置

},

legend: { // 图例配置

show: true, // 是否显示图例,默认为true

type: 'plain', // 图例的类型,可选值:'plain'(普通图例),'scroll'(可滚动翻页的图例)

left: 'center', // 图例的水平对齐方式,可选值:'left'、'center'、'right'

top: 'top', // 图例的垂直对齐方式,可选值:'top'、'middle'、'bottom'

orient: 'horizontal', // 图例的布局方向,可选值:'horizontal'(水平布局),'vertical'(垂直布局)

align: 'auto', // 图例标记和文本的对齐方式,可选值:'auto'、'left'、'right'

padding: 5, // 图例内边距

itemGap: 10, // 图例每项之间的间隔

itemWidth: 25, // 图例标记的宽度

itemHeight: 14, // 图例标记的高度

selectedMode: true, // 图例的选中模式,可选值:'single'(单选),'multiple'(多选),'false'(不可选)

selected: {...}, // 初始选中状态设置

inactiveColor: '#ccc', // 未选中图例标记的颜色

textStyle: {...}, // 图例文本的样式

tooltip: {...}, // 图例的提示框配置,用于鼠标悬停在图例项上时显示提示信息

data: [ // 图例的数据项数组

{ name: '系列1', icon: 'circle' },

{ name: '系列2', icon: 'rect' },

// ...

]

}

grid: { // 图表离容器的距离

show: false, // 是否显示绘制区域,默认为false

left: '10%', // 绘制区域的左边距

top: '60', // 绘制区域的上边距right: '10%', // 绘制区域的右边距

bottom: '20%', // 绘制区域的下边距

containLabel: false, // 是否包含坐标轴标签,默认为false,如果设置为true,会将坐标轴标签算入绘制区域,常用于防止标签溢出

backgroundColor: '', // 绘制区域的背景色

borderColor: '#ccc', // 绘制区域的边框颜色

borderWidth: 0, // 绘制区域的边框宽度

shadowBlur: 0, // 绘制区域的阴影模糊大小

shadowColor: '', // 绘制区域的阴影颜色

shadowOffsetX: 0, // 绘制区域的阴影水平偏移

shadowOffsetY: 0// 绘制区域的阴影垂直偏移

},

xAxis: { // x 轴配置

show: true, // 是否显示 X 轴,默认为true

type: 'category', // X 轴类型,可选值有 'category'(类目轴)、'value'(数值轴)、'time'(时间轴)、'log'(对数轴)

data: [], // X 轴数据,通常为一个数组,每个元素对应一个刻度

name: '', // X 轴名称

nameLocation: 'end', // X 轴名称位置,可选值有 'start'、'middle'、'end'

nameGap: 15, // X 轴名称与轴线之间的距离

nameTextStyle: {}, // X 轴名称的样式

axisLabel: {}, // 刻度标签的样式

axisTick: {}, // 刻度线的样式

axisLine: {}, // 轴线的样式

splitLine: {}, // 分隔线的样式

splitArea: {}, // 分隔区域的样式

inverse: false, // 是否反转 X 轴(从右到左排列)

boundaryGap: true, // 坐标轴两边留白策略,可选值为 true、false、[min, max]

min: null, // X 轴的最小值

max: null, // X 轴的最大值

interval: 'auto', // 刻度的间隔,'auto' 表示自动计算

axisPointer: {}, // 坐标轴指示器的配置,用于显示 tooltip 时的辅助线

triggerEvent: false// 是否触发事件,比如鼠标悬停时的 tooltip,默认为false

},

yAxis: { // y 轴配置

//与x轴类似

},

series: [ // 系列列表,每个系列对应一个图表

{

type: 'bar', // 系列类型,比如柱状图、折线图等

name: '', // 系列名称

data: [], // 系列数据,通常为一个数组,每个元素对应一个数据点

xAxisIndex: 0, // X 轴索引,用于指定数据与哪个 X 轴对应

yAxisIndex: 0, // Y 轴索引,用于指定数据与哪个 Y 轴对应

symbolSize: 10, // 图形的大小

symbol: 'circle', // 标记的图形,比如 'circle'、'rect'、'triangle' 等

label: {}, // 标签的样式

itemStyle: {}, // 数据项的样式

lineStyle: {}, // 折线图线条的样式

barWidth: 'auto', // 柱状图的宽度,可以设置成数字或百分比

barGap: '30%', // 柱状图之间的间隔

barCategoryGap: '20%', // 不同系列的柱状图之间的间隔

smooth: false, // 是否平滑曲线,仅对折线图有效

step: false, // 是否使用阶梯线,仅对折线图有效

showSymbol: true, // 是否显示数据点的标记

animation: true, // 是否开启动画效果

animationDuration: 1000, // 动画时长,单位为毫秒

animationEasing: 'linear', // 动画缓动效果

tooltip: {}, // 提示框的样式和内容

emphasis: {} // 高亮状态下的样式

},

{...}

],

toolbox: {...}, // 工具箱配置,可添加下载、刷新、数据视图等功能

dataZoom: [{...}, {...}], // 数据区域缩放配置,可以支持x轴、y轴的缩放

visualMap: {...}, // 视觉映射组件配置,用于颜色、大小等数据的映射

polar: {...}, // 极坐标系配置

radiusAxis: {...}, // 极坐标系的径向轴配置

angleAxis: {...}, // 极坐标系的角度轴配置

radar: {...}, // 雷达图配置

brush: {...}, // 刷选组件配置,用于选取特定区域进行联动

geo: {...}, // 地理坐标系配置

parallel: {...}, // 平行坐标系配置

parallelAxis: {...}, // 平行坐标系的坐标轴配置

singleAxis: {...}, // 单轴配置

timeline: {...}, // 时间线配置,用于展示不同时间段的数据

graphic: {...}, // 自定义图形元素配置

calendar: {...}, // 日历坐标系配置

dataset: {...}, // 数据集配置,用于在多个系列之间共享数据

aria: {...}, // 无障碍配置

animation: {...}, // 动画配置

seriesLayoutBy: 'row', // 数据在图表中的布局方式,可选值:'column'、'row'

blendMode: 'source-over', // 图表绘制时的混合模式,可控制系列之间的叠加效果

... // 其他自定义配置

}

标签:...,常用,false,配置,图例,参数,提示框,true,Echarts
From: https://www.cnblogs.com/CMcaiming/p/17640456.html

相关文章

  • 前端埋点常用方法
    1.使用场景主要用于数据采集,如:性能分析,用户行为分析,日常信息采集,测试信息采集等。指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。.比如用户某个icon点击次数、观看某个视频的时长等等。2.方法常见的埋点上报方式有ajax,img,navigator.sen......
  • yum下载常用方法
    yum自动下载RPM包及其所有依赖的包至/root/rpm目录:yuminstall--downloadonly--downloaddir=/root/rpm<package-name>切换到下载目录rpm中批量安装rpm-ivh*--nodeps--forceyum命令本身就可以用来下载一个RPM包,标准的yum命令提供了downloadonly(只下载)的选项来达到这个......
  • vue+echarts
    <template><div><divref="chart"style="width:50%;height:376px"></div><divref="chart1"style="width:50%;height:376px"></div></div></template><sc......
  • echarts简单使用
    <template><div><divclass="container"><divid="echart"></div></div></div></template><script>exportdefault{data(){return{};},//页面初始化挂载d......
  • vue使用echarts画图
    <template><div><divclass="container"><divid="echart"></div></div></div></template><script>exportdefault{data(){return{};},//页面初始化挂载d......
  • sftp常用命令
    help查看sftp支持哪些命令ls 查看当前目录下文件cd指定目录lcd更改和/或打印本地工作目录pwd查看当前目录lpwd打印本地工作目录getxxx.txt下载xxx文件putxxx.txt上传xxx文件quit/bye/exit退出sftpsftp xxx.xxx.xxx.xxx 登录root用户......
  • Postman断言、关联、参数化
    Postman断言简介让Postman工具代替人工自动判断预期结果和实际结果是否一致断言代码书写在Tests标签页中。查看断言结果TestResults标签页==Postman常用断言====1.断言响应状态码==Statuscode:Codeis2002.断言包含某字符串Responsebody:Containsst......
  • 四种解决”Arg list too long”参数列表过长的办法
    在linux中删除大量文件时,直接用rm会出现:-bash:/bin/rm:参数列表过长,的错误。这时可以用find命令来结合使用。例:1、rm*-rf改为:find.-name"*"|xargsrm-rf'*'就行了。2、rmtest*-rf改为:find.-name"test*"|xargsrm-rf"test*"mv时报参数列表过长,foriin*.m......
  • 在Android Studio中统计代码行数可以通过插件或者内置的工具来实现。以下是两种常用的
    在AndroidStudio中统计代码行数可以通过插件或者内置的工具来实现。以下是两种常用的方法:**方法一:使用插件:**1.打开AndroidStudio,点击顶部菜单中的"File"(文件)。2.选择"Settings"(设置)或"Preferences"(首选项),然后在弹出的窗口中选择"Plugins"(插件)。3.在搜索框中输入"Code......
  • 4G工业路由器的功能与选型!详解工作原理、关键参数、典型品牌
    随着工业互联网的发展,4G工业路由器得到越来越广泛的应用。但是如何根据实际需求选择合适的4G工业路由器,是许多用户关心的问题。为此,本文将深入剖析4G工业路由器的工作原理、重要参数及选型要点,并推荐优质的品牌及产品,以提供选型参考。  一、4G工业路由器的工作原理4G......