echarts地图上 某区域指定位置添加文字说明

echarts地图上 某区域指定位置添加文字说明,第1张

可以在电脑版的echarts地图选择地点然后标记,具体步骤如下:

1、打开echarts地图地图。

2、选择地图功能区中的工具箱,选择标记功能。

3、点击d出的工具箱中的标记标志,选择想要进行标记的地点。

4、标记想要的地点后,输容入标记地点的名称并点击保存。

注意事项:

1、以计算机为主体的电子设备在制图中的广泛应用,地图不再限于用符号和图形表达在纸(或类似的介质)上,它可以数字的形式存储于磁介质上,或经可视化加工表达在屏幕上;

2、由于航天技术的发展,出现了卫星遥感影像,这不但给地图制作提供了新的数据源,还可以把影像直接作为地理事物的表现形式,同时把人们的视野拓展到月球和其他星球。

3、多媒体技术的发展,使得视频、声音等都可以成为地图的表达手段。

一个网页中可以创建多个 echarts 实例。

每个 echarts 实例中可以创建多个图表和坐标系等等(用 option 来描述)。

准备一个 DOM 节点(作为 echarts 的渲染容器),就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

在 echarts 里, 系列 (series)是指:一组数值以及他们映射成的图。

一个 系列 包含的要素至少有:一组数值、图表类型(series.type)、以及其他的关于这些数据如何映射成图的参数。

说人话就是, 系列 这个东西就是 用来描述图表的 ,包含了图表的数据、图表是什么类型:line(折线图)、bar(柱状图)、pie(饼图)... 、以及其它的构成参数。

也可以有另一种配置方式,系列的数据从 dataset 中取:

在系列之上,echarts 中各种内容,被抽象为“组件”。

例如,echarts 中至少有这些组件: xAxis (直角坐标系 X 轴)、 yAxis (直角坐标系 Y 轴)、 grid (直角坐标系底板)、 angleAxis (极坐标系角度轴)、 radiusAxis (极坐标系半径轴)、 polar (极坐标系底板)、 geo (地理坐标系)、 dataZoom (数据区缩放组件)、 visualMap (视觉映射组件)、 tooltip (提示框组件)、 toolbox (工具栏组件)、 series (系列)、...

我们注意到,其实 系列 (series)也是一种组件,可以理解为:系列是专门绘制“图”的组件。

如下图,右侧的 option 中声明了各个组件(包括系列),各个组件就出现在图中。

echarts 的使用者,使用 option 来描述其对图表的各种需求,包括:有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能 *** 作什么事情等等。简而言之, option 描述了: 数据 、 数据如何映射成图形 、 交互行为 。

系列里的 series.data 是本系列的数据。也可以使用另一种方式,系列数据从 dataset 中取:

多数组件和系列,都能够基于 top / right / down / left / width / height 绝对定位。

这种绝对定位的方式,类似于 CSS 的绝对定位( position: absolute )。绝对定位基于的是 echarts 容器 DOM 节点。

它们的值可以是

如下图的例子,对 grid 组件(也就是直角坐标系的底板)设置 left、right、height、bottom 达到的效果。

我们可以注意到, left right width 是一组(横向)、 top bottom height 是另一组(纵向)。这两组没有什么关联。每组中,至多设置两项就可以了,第三项会被自动算出。例如,设置了 left 和 right 就可以了, width 会被自动算出。

坐标系用于布局,以及显示数据的刻度等等。一个坐标系,可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中,包括有 xAxis (直角坐标系 X 轴)、 yAxis (直角坐标系 Y 轴)、 grid (直角坐标系底板)三种组件。 xAxis 、 yAxis 被 grid 自动引用并组织起来,共同工作。

下图,只声明了 xAxis 、 yAxis 和一个 scatter (散点图系列),echarts 暗自为他们创建了 grid 并关联起他们:

再来看两个 yAxis ,共享了一个 xAxis 的例子。两个 series ,也共享了这个 xAxis ,但是分别使用不同的 yAxis ,使用 yAxisIndex 来指定它自己使用的是哪个 yAxis :

还存在一个 echarts 实例中,有多个 grid 的情况,每个 grid 分别有 xAxis 、 yAxis ,他们使用 xAxisIndex 、 yAxisIndex 、 gridIndex 来指定引用关系:

另外,一个系列,往往能运行在不同的坐标系中。例如,一个 scatter (散点图)能运行在 直角坐标系、极坐标系 、地理坐标系(GEO) 等各种坐标系中。同样,一个坐标系,也能承载不同的系列,如上面出现的各种例子,直角坐标系里承载了 line (折线图)、 bar (柱状图)等等。

1、下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局。2.0以后上的版本,需要把开发包放到body下,否则ie低版本会出现属性未找到的错误,导致图标初始化失败。

2、第二步,普通初始化图表,通过调用开发包方法,有两种初始化方式,

1.var myChart = echarts.init(document.getElementById("echart"))

2.var myChart=require('echarts').init(document.getElementById("echart"))

一般建议使用第一种方法进行初始化 *** 作。

3、第三步,设置option属性,来给图表设置数据,option是数组元素,tooltip:提示框,legend图例,calculable可设置是否拖拽,series设置数据(data类型也为数组类型),开始先随机初始化几条模拟数据,

4、到这一步,就完成了,图表初始化的步骤,效果如下图所示。然后大家可以改变下图标的样式,2.0版本留了设置主题的方法,可设置setThem()对图表样式进行修改。

5、看看主题怎么配置,设置色版,设置主题颜色,不一一介绍了,请大家请看下面代码:

6、通过上面主题的添加完成了对样式的修改,当然最后大家记嘚设置myChart.setTheme(theme)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11401474.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存