ECharts 基础概念 实例/series/组件

最新推荐文章于 2023-11-17 17:48:34 发布
VIP文章 最新推荐文章于 2023-11-17 17:48:34 发布
阅读量1w 收藏 52
点赞数 14
分类专栏： 前端 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/carlyll/article/details/103990193
版权

参考来源：官方文档

 

1 ECharts实例

一个网页中可以创建多个 echarts实例。每个 echarts实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

 

2 系列（series）

系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

echarts 里系列类型（series.type）就是图表类型。系列类型（seri

最低0.47元/天 解锁文章
一做就废
关注
  • 14
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
在Vue中使用Echarts实例图的方法实例
10-14
主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【Echarts】配置项 之 series
Fulling的博客
07-01 4531
箱型图、箱线图，是一种用作显示一组数据分散情况资料的统计图。数图、主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树和右子树。主题河流，是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。路径图，用于带有起点和终点信息的线数据的绘制，主要用于航线、路线可视化。旭日图，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。直角坐标系上的散点图可以用来展示数据的 x、y 之间的关系。雷达图，主要用于表现多变量的数据，例如属性分析。关系图，用于展现节点与节点之间的关系数据。
echarts属性详解
qq_22841387的博客
09-21 8130
echarts属性详解title（图表标题）tooltip(数据提示)legend（选择哪些显示）toolbox（右上角--工具箱）grid（这个有点懵逼）xAxis（设置x轴）yAxis（设置y轴）series（构成画面的元素）on（方法） 完整代码在下方将给出，可根据本文档进行需要的设计 <template> <div class="chart" style="height: 500px"></div> </template> <scri
echarts_series总结
热门推荐
王轩的博客
12-20 3万+
echarts_series总结 echarts官网实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <script src="./static/echarts.min.js"></script> </head> <body> &l
Echarts -- 实现动态加载series
最新发布
m0_74444744的博客
11-17 2126
Echarts -- 实现动态加载series
如何理解echarts中的系列series和维度dimensions
TreepoBear的博客
04-05 1707
当然这只是画图展示的维度，分组下钻可以无限钻下去的，举个例子，做AB实验，实验组别=》每个实验组别里面再分组。毕竟直角坐标系是个二维的图，把取值这个维度放在y轴，只剩下一个维度x轴。直角坐标系，自带两个维度，x和y。如果再分个组，有四个维度了，只能组合其中两个维度，比如x轴放年份，颜色是A组-MachaLatte这种组合的形式。官网的例子里，x轴的类型是类目轴category，而且含义就是类目，类目这个维度体现在x轴上。对于不同的坐标系，有不同的映射方式，最经典的，直角坐标系，指定x，y用哪个维度。
echarts的series——折线图，饼图，柱状图，散点图的配置
杜永康的博客
03-22 9194
Line（折线图）：用于展示数据随时间或其他变化而变化的趋势。 Bar（柱状图）：用于展示数据的大小或数量的差异。 Scatter（散点图）：用于展示两个变量之间的关系。 Pie（饼图）：用于展示数据的占比关系。 Radar（雷达图）：用于展示多个变量之间的关系。 Map（地图）：用于展示地理位置上的数据分布。 Tree（树图）：用于展示层级结构数据的关系。 Heatmap（热力图）：用于展示数据密度分布。
ECharts基础知识详细介绍
Argonaut_的博客
02-28 6520
在 ECharts 中的组件很多，例如在后续内容中我们可能遇到，xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等。系列（series）是很常见的名词。
echarts使用笔记总结3：series使用方法
君莫笑
01-12 9311
echarts配置
xuyao的博客
05-31 1577
echarts图表的使用
Echarts中常用的参数总结以及参数自定义示例
编码世界
12-18 1万+
本文主要讲解使用Echarts时setOption里面的属性以及常见的问题，参数都是本人项目里的具体参数。设置内容都是在 `setOption({ })`中。
Vue+Echarts监控大屏实例十：智慧养老监控模板实例
05-30
Vue+Echarts监控大屏实例十：智慧养老监控模板实例，包括源码，开发文档、素材等。 使用vue-echarts实现监控大屏搭建，开发，实现对于监控界面的相关开发资料，提供实例源码、开发过程视频及实现过程。 高德地图并...
echarts及实例
02-26
最新版本的echarts,免费的图标控件，纯javascript实现，并有一些实例。
modbus tcp/ip通信client实例
07-24
用delphi7开发的一个modbus tcp/ip client 通信例子，希望可以帮助大家学习借鉴
echarts实例-实时显示疫情.zip
09-01
根据网上教程调试通过，主要文件为一个html文件一个js文件,一个css文件，直接可以运行，适合初学者。
Echarts之series动态渲染多个折线图/面积图
DZQ1223的博客
05-24 2965
由于工作中遇到的图表特别多，每次用过配置项总是想不起来，在这里记录一下，希望也可以帮到路过的你。
Echarts中series、option、component究竟是啥？
sd6022的博客
12-28 8848
Echarts创建 一个网页中可以创建多个echarts图例。一个DOM节点可作为echarts的渲染容器。每个DOM节点只能放一个echarts实例。 series 系列 一个系列至少包含的要素为：一组数值，图表类型（series.type），以及其他的关于这些数据如何映射成图的参数。 图表类型 echarts中的图表类型主要为：line-折线，bar-柱状图，pie-饼图，scatter-散点图，graph-关系图，tree-树图，等等 类同地，系列的数据从dataset中获取的另一种配置方式。 c
手把手带你入门ECharts
df1445的博客
03-29 1263
1.什么是ECharts ECharts，缩写来自Enterprise Charts，商业级数据图表，是来自百度商业前端数据可视化团队EFE的一个开源的纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高...
echarts---series
weixin_43390711的博客
05-23 2234
一、series (Array[object]) // 1、type 指定图表的类型 // 2、name 指定系列的名称，用于tooltip中的显示和legend图例筛选 // 3、symbol 标记的图形，用于legend的标记 预定义值：circle、rect base64格式的图片：'image://data:image/gif;base64,xxxxxxxxxxx' // 4、data （Array[object]） 当前系列的一组数据 data: [ { .
vue中echarts初始化实例
05-24
在Vue中初始化一个ECharts实例的步骤如下： 1. 安装echarts：可以使用npm或yarn安装echarts。 ``` npm install echarts --save-dev ``` 或 ``` yarn add echarts --dev ``` 2. 在Vue组件中引入echarts。 ```javascript import echarts from 'echarts' ``` 3. 在Vue组件的mounted()函数中初始化echarts实例。 ```javascript mounted() { // 基于准备好的dom，初始化echarts实例 let myChart = echarts.init(document.getElementById('chart')) // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) } ``` 在上面的代码中，我们使用document.getElementById('chart')获取了一个DOM元素，然后使用echarts.init()方法初始化了一个echarts实例，并将其挂载到DOM元素中。 接下来，我们使用setOption()方法为echarts实例设置图表的配置项和数据。 注意：在销毁组件时，我们需要调用echarts实例的dispose()方法来释放资源。 ```javascript beforeDestroy() { // 销毁echarts实例 if (this.myChart) { this.myChart.dispose() this.myChart = null } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值