Echarts.js常见参数设置

常见API

• echarts

  • echarts.init(dom,theme)。

    • 创建一个ECharts实例，返回echartsinstance，不能在单个容器上初始化多个ECharts实例。
    • dom是实例容器，一般是一个具有宽高的div元素。必须要设置宽高。
    • theme应用的主题。可以是一个主题的配置对象，也可以使用已经通过 使用已经通过 echarts.registerTheme 注册的主题名称。注册的主题名称。

  • echarts.connect(group:string|Array)

    • 多个图表实例实现联动。

    • group为group的id。或者图表实例的数组。

    • // 可以直接传入需要联动的实例数组,chart1和chart2为实例
      echarts.connect([chart1, chart2]);
      

      • echarts.disconnect(group)

    • 解除图表实例的联动，如果只需要移除单个实例，可以将通过将该图表实例 group 设为空。

  • echarts.registerMap(mapName,geoJson,specialAreas)

    • 注册可用的地图，必须在包括gen组件或者map图表类型的时候才能使用。

    • mapName地图名称，在geo或者map图表类型中设置的map对应的就是该值。

    • geoJsonGeoJson 格式的数据

    • specialAreas。可选，将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。

    • //示例
      echarts.registerMap('USA', usaJson, {
        // 把阿拉斯加移到美国主大陆左下方
        Alaska: {
            // 左上角经度
            left: -131,
            // 左上角纬度
            top: 25,
            // 经度横跨的范围
            width: 15
        },
        // 夏威夷
        Hawaii: {
            left: -110,
            top: 28,
            width: 5
        },
        // 波多黎各
        'Puerto Rico': {
            left: -76,
            top: 26,
            width: 2
        }
      });
      

      • echarts.getMap(mapName)

    • 获取已注册的地图，返回的对象类型如下

    • {
          // 地图的 geoJson 数据
          geoJson: Object,
          // 地图的特殊区域，见 registerMap
          specialAreas: Object
      }
      

    • echarts.registerTheme(themeName,theme)

    • 注册主题，用于初始化实例的时候指定。

• echarts实例(echartsinstance)

  • echartsinstance.setOption(option,notMerge, lazyUpdate)

    • option图表的配置项，各种参数。
    • notMerge。可选，是否不跟之前设置的option进行合并，默认为false，即合并。
    • lazyUpdate。可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。

  • echartsInstance.getWidth。获取实例容器的宽度。

  • echartsInstance.getHeight。获取实例容器的高度。

  • echartsInstance.getDom。获取实例容器的dom节点。

  • echartsInstance.getOption。

    • 获取当前实例中维护的 option 对象，返回的 option 对象中包含了用户多次 setOption 合并得到的配置项和数据，也记录了用户交互的状态，例如图例的开关，数据区域缩放选择的范围等等。所以从这份 option 可以恢复或者得到一个新的一模一样的实例。

    • 注意：返回的 option 每个组件的属性值都统一是一个数组，不管 setOption 传进来的时候是单个组件的对象还是多个组件的数组。如下形式：

      • {
            title: [{...}],
            legend: [{...}],
            grid: [{...}]
        }
        

配置项

- `title`。标题组件，包含主标题和副标题。对标题的一系列操作。
- `legend`。图例组件（说明小图标）。 展现了不同系列的标记，颜色和名字。**可以通过点击图例控制哪些系列不显示**。 
- `grid`。直角坐标系内绘制网格图，网格显示与否，X轴与Y轴距左上角的距离（控制整个图距离左上角的距离）。
- `xAxis`。对X轴的具体设置。
- `yAxis`。对Y轴的具体设置。
- `polar`。极坐标系。
- `radiusAxis`。极坐标系的径向轴。
- `angleAxis`。极坐标系的角度轴。
- `radar`。 雷达图坐标系组件，只适用于 雷达图。
- `dataZoom`。 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。 
- `visualMap`。 视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
- `tooltip`。提示框组件。 可以设置在全局，也可以设置在坐标系中，可以设置在`series`中。
- `axisPointer`。 坐标轴指示器的全局公用设置 ，坐标轴指示器是指示坐标轴当前刻度的工具。（鼠标移到那，就显示坐标轴的信息） 
- `toolbox`。工具栏。对图的几个操作：导出图片，数据视图，动态类型切换，缩放，重置。
- `brush`。区域选择组件，可以用鼠标拖动区域选中，被选中的区域会**高亮**，没有被选中的区域会变**灰色**。
- `geo`。地理坐标系组件。地图类型：中国，世界。是否开启鼠标缩放和平移，，等等。地图可以从`node_modules`引入。
- `parallel`。平行坐标系。
- `paralleAxis`。平行坐标系中的坐标轴。
- `singleAxis`。单轴图。 可以被应用到散点图中展现一维数据 。
- `timeline`。 提供了在多个 `ECharts option` 间进行切换、播放等操作的功能。 动态的图按时间连贯动画。
- `graphic`。原生图形元素组件。可支持的图形元素包括，`image,text....`。可以使用圆形元素做水印和文本块。
- `calendar`。日历坐标系组件。
- `dataset`。 `ECharts 4 `开始支持了 `数据集`（`dataset`）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。 
- `aria`。 使得网页内容和网页应用能够被更多残障人士访问。 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。 
- `textStyle`。全局的字体样式。
- `color`。 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 
- `backgroundColor`。背景色，默认没有。
- `series`。 系列列表。每个系列通过 `type` 决定自己的图表类型 。