ECharts常用参数

最新推荐文章于 2025-03-24 18:40:53 发布

污斑兔

最新推荐文章于 2025-03-24 18:40:53 发布

阅读量151

点赞数 2

文章标签： ECharts 前端

本文链接：https://blog.youkuaiyun.com/zweizhao/article/details/144703540

版权

ECharts常用参数

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color stack graphic

series

系列列表。每个系列通过 type 决定自己的图表类型
通俗的理解：图标数据，指定什么类型的图标，可以多个图表重叠。
label显示内部或外部文本，labelLine即引导线

xAxis：直角坐标系 grid 中的 x 轴

boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：直角坐标系 grid 中的 y 轴

grid：直角坐标系内绘图网格。

title：标题组件

tooltip：提示框组件

legend：图例组件

color：调色盘颜色列表

stack：数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

graphic：支持image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

污斑兔

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue学习-Echarts框架使用

Dennis Shaw的博客

06-26

578

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行

vue 图表_一个超简单好用的图表框架 v-charts

weixin_39882317的博客

12-09

1万+

为什么使用v-charts在使用echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。文档链接：官方文档：https://v-charts.js.org/#/gitHub: https...

参与评论您还未登录，请先登录后发表或查看评论

用VUE框架写一个eCharts图表

Headertext的博客

03-25

1451

下载插件 npm install echarts --save 引入我们的 eCharts 我们也可以再官网上看到eCharts的下载和引入方式 ECharts的基础配置在官网给出了我们许多示例：链接我们都可以直接拿来用，但是里面的一些配置我们可以根据自己的需求来修改，所以我们需要了解ECharts的基础配置。主要配置（常用的）官网配置项参考文档：链接需要了解的主要配置：seriesxAxis yAxisgrid tooltiptitlelegendcolor...

Echarts堆叠图顶部显示总数的简单方法

m0_45020691的博客

03-24

818

对于堆叠图顶部显示总数的方法在Echarts中没有写好的，需要自己去实现。看了网上很多方法，都需要手动计算出每列的总和，这里记为stackSums，实现方法分为三种（因为我的横坐标数据是不会变的，所以仅针对x轴不变的情况，我用1和2方法就够了。（2）在option中的series对象后，加上新添加的柱子数据。此时为了便于观察，我把柱子设为了红色的，效果是这样的。（1）计算每列总和，记录到stackSums数组中。

vue 页面常用图表框架

servepeople的博客

09-20

1581

这些图表库都可以很好地与 Vue 框架结合使用，具体选择可以根据项目的需求和图表复杂度来决定。

Echarts中常用的参数总结以及参数自定义示例_echarts series参数(1)

2301_82243558的博客

04-27

1180

,scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了其中为后端数据，其实就是将x轴的类目项文字可以动态换行网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Echarts中常用的参数总结以及参数自定义示例_echarts series参数

2301_82243558的博客

04-27

725

scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了。itemWidth: 10, // 设置宽度。itemHeight: 10, // 设置高度。itemGap: 40 // 设置间距。name: “答辩评分”,

2024年最全Echarts中常用的参数总结以及参数自定义示例_echarts series参数，附面试题

2401_84170414的博客

05-14

829

scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了。(img-ZWU2YQJI-1715629971064)]itemWidth: 10, // 设置宽度。itemHeight: 10, // 设置高度。itemGap: 40 // 设置间距。name: “答辩评分”,

ECharts常用配置

a1578460233的博客

06-06

703

ECharts常用配置：标题组件 title --text 标题 --link 超链接 --textStyle 标题样式 --subtext 副标题 --subtextStyle 副标题样式 --textAlign 水平对齐 --textVerticalAlign 垂直对齐 --padding 标题内边距 --itemGap 主副标题间距 --left right top bottom 距离 --backgroundColor 背景颜色 --b

使用vue+echarts绘制图表

LeeBingNing的博客

03-16

2532

五步绘制echarts图表

vue-charts, 用于 Vue.js的Google图表插件.zip

09-18

vue-charts, 用于 Vue.js的Google图表插件的vue图表用于 Vue.js的Google图表插件演示基本折线图多组数据，带有自动更新功能。事件在窗口大小调整窗口上重新绘制重画安装npm install --save-dev vue-chart

学习图表框架-uPlot（vue项目）第一篇

m0_58185754的博客

08-01

1623

学习图表框架-uPlot（vue项目）第一篇

vue常用图标框架echars

weixin_45669184的博客

05-14

397

专注于图表的框架链接地址：echars

VUE整合Echarts实现简单的数据可视化

最新发布

03-26

<think>好的，我现在需要回答用户关于ECharts图表库常用属性及配置说明的问题。首先，我需要回顾用户提供的引用内容，确保正确引用相关信息。用户提供了四个引用，涉及初始化方法、图例朝向、刻度标签显示和图表类型切换。接下来，我需要组织这些信息，按照ECharts配置的一般结构来分模块说明。首先，用户提到的初始化方法在引用[1]中，应该放在图表初始化的部分。然后是图例配置，引用[2]提到orient属性，需要说明vertical和horizontal的区别。接着是坐标轴配置，引用[3]中的axisLabel对象，特别是show属性。最后是工具箱中的magicType，引用[4]中的类型切换功能。我还需要补充其他常用属性，比如标题、系列配置、提示框等，这些虽然没有直接引用，但属于常用部分。要确保每个部分都清晰，语法正确，使用中文，并正确添加引用标识。此外，生成相关问题时要围绕ECharts的配置和扩展应用。检查是否所有数学公式都正确使用$...$或$$...$$格式。虽然当前问题主要涉及代码和配置，但如果有数值示例可能需要数学格式，但这里可能不涉及。最后，保持回答结构清晰，分模块说明，并自然融入引用标记。</think>### ECharts 常用属性及配置说明 #### 一、图表初始化使用 `echarts.init` 方法初始化图表容器，并通过 `setOption` 配置图表参数： ```javascript var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ /* 配置项 */ }); ``` 支持通过 `getImage` 获取图表图像[^1]。 --- #### 二、核心配置项说明 1. **标题 (title)** - `text`: 标题文本，如 `text: '销量趋势图'` - `subtext`: 副标题，如 `subtext: '2023年数据'` 2. **图例 (legend)** - `orient`: 图例朝向，可选 `vertical`（垂直）或 `horizontal`（水平）[^2] - `data`: 图例项列表，如 `data: ['销量', '库存']` 3. **坐标轴 (xAxis/yAxis)** - `type`: 坐标轴类型（`category` 类目轴 / `value` 数值轴） - `axisLabel`: 控制刻度标签显示 ```javascript axisLabel: { show: true, // 是否显示标签[^3] rotate: 45 // 标签旋转角度 } ``` 4. **数据系列 (series)** - `type`: 图表类型（`line`/`bar`/`pie` 等） - `data`: 数据数组，如 `data: [120, 200, 150]` - `stack`: 堆叠模式（适用于柱状图、折线图） --- #### 三、工具箱配置 (toolbox) ```javascript toolbox: { feature: { magicType: { show: true, type: ['line', 'bar', 'stack'] // 动态切换图表类型[^4] }, saveAsImage: {} // 保存为图片 } } ``` --- #### 四、提示框组件 (tooltip) - `trigger`: 触发类型（`item` 数据项触发 / `axis` 坐标轴触发） - `formatter`: 自定义提示内容 ```javascript tooltip: { formatter: '{a}<br/>{b}: {c}万元' } ``` --- #### 五、视觉映射 (visualMap) 用于数据与颜色的映射： ```javascript visualMap: { min: 0, max: 100, calculable: true, inRange: { color: ['#50a3ba', '#eac763', '#d94e5d'] } } ``` ---

ECharts常用参数

ECharts常用参数

series

xAxis：直角坐标系 grid 中的 x 轴

yAxis：直角坐标系 grid 中的 y 轴

grid：直角坐标系内绘图网格。

title：标题组件

tooltip：提示框组件

legend：图例组件

color：调色盘颜色列表

stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

graphic：支持image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group。

stack：数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。