echarts的一些基础配置信息文档(基于地图路线) ---option

437 阅读3分钟

option里面的一些配置信息文档

option是什么

  1. title: 设置图表的标题,包括主标题和副标题。
  2. tooltip: 设置鼠标悬浮在图表上时的提示框样式。
  3. legend: 设置图例,用于解释不同系列的数据项。
  4. visualMap: 设置视觉映射组件,用于将数据映射到不同的视觉元素上,如颜色、大小等。
  5. series: 设置系列,用于定义不同的数据系列,并配置其样式、数据等。
  6. geo: 设置地理坐标系组件,用于绘制地图。
  7. toolbox: 设置工具箱,包括导出图片、数据视图等工具。
下面是一些常见的tooltip配置:

使用 tooltip 配置项来配置提示框的样式和行为。以下是一些常见的 tooltip 配置样式和相关属性:

  1. trigger: 触发类型,可选值包括 'item'(数据项触发)和 'axis'(坐标轴触发)。
  2. formatter: 提示框内容格式器,可以使用字符串模板或回调函数自定义提示框内容。
  3. backgroundColor: 提示框背景色。
  4. borderColor: 提示框边框颜色。
  5. borderWidth: 提示框边框宽度。
  6. padding: 提示框内边距。
  7. textStyle: 提示框文本样式,包括字体、字号、颜色等。
  8. extraCssText: 提示框的额外 CSS 样式。
下面是一些常见的geo配置:

geo 属性来对地图的样式进行配置。下面是一些常见的 geo 配置样式:

  • map: 设置地图的类型,如 map: 'china' 表示使用中国地图。更多地图类型可以参考 ECharts 的官方文档
  • roam: 设置是否开启鼠标缩放和平移漫游,默认为 false
  • center: 设置地图的中心点坐标,如 center: [104.114129, 37.550339] 表示设置地图中心点为经度为 104.114129、纬度为 37.550339 的位置。
  • zoom: 设置地图的缩放级别,如 zoom: 5 表示设置地图缩放级别为 5。
  • label: 设置地图标签的样式,如 label: { show: true, color: '#000' } 表示显示标签,并将标签文字颜色设置为黑色。
  • itemStyle: 设置地图区域的样式,如 itemStyle: { areaColor: '#eee', borderColor: '#999' } 表示将地图区域的背景颜色设置为浅灰色,边框颜色设置为深灰色。
  • emphasis: 设置鼠标悬停在地图区域上时的样式,如 emphasis: { label: { show: true, color: '#fff' }, itemStyle: { areaColor: '#69c0ff' } } 表示鼠标悬停时显示标签,并将区域背景颜色设置为蓝色。

以上是一些常用的 geo 配置样式,更多样式配置可以参考 ECharts 的官方文档

```   geo: {
          silent: true,
          map: 'china',
          label: {
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: false,
          //   放大我们的地图
          zoom: 1.25,
          itemStyle: {
            normal: {
              // 地域边框颜色
              borderColor: '#FDB892',
              borderWidth: 0
            },
            emphasis: {
              areaColor: '#ba586f'
            }
          },
          regions: lineManageRegions
        },
  • silent: 设置是否开启鼠标事件,默认为 false,即开启鼠标事件。设置为 true 则禁用鼠标事件。
  • map: 设置地图的类型,如 map: 'china' 表示使用中国地图。
  • label: 设置地图标签的样式,这里的 emphasis 表示鼠标悬停时的样式,将标签文字颜色设置为白色。
  • roam: 设置是否开启鼠标缩放和平移漫游,默认为 false,即禁用缩放和平移漫游。
  • zoom: 设置地图的缩放级别,将地图放大到原来的 1.25 倍。
  • itemStyle: 设置地图区域的样式,其中 normal 表示普通状态下的样式,将地图区域的边框颜色设置为橙色(#FDB892),边框宽度设置为 0;emphasis 表示鼠标悬停时的样式,将区域背景颜色设置为粉色(#ba586f)。
  • regions: 可以设置特定区域的样式,这里的 lineManageRegions 可能是一个数组,包含一些特定区域的配置信息,但是需要在代码中定义才能知道具体的配置内容。

需要注意的是,地图数据可视化的功能比较复杂,除了 geo 属性之外,还需要配置 series 属性、数据等,才能完整实现功能。