ECharts 基础使用

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

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

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

在 echarts 里， 系列 （series）是指：一组数值以及他们映射成的图。

一个 系列 包含的要素至少有：一组数值、图表类型（seriestype）、以及其他的关于这些数据如何映射成图的参数。

说人话就是， 系列 这个东西就是 用来描述图表的 ，包含了图表的数据、图表是什么类型：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 描述了： 数据 、 数据如何映射成图形 、 交互行为 。

系列里的 seriesdata 是本系列的数据。也可以使用另一种方式，系列数据从 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 （柱状图）等等。

ECharts图表组件当我们xAxis的data数据过多的情况下你会发现原本连续的坐标刻度出现了断层（间隔）的现象，为什么呢？其实这种现象是很正常的，它是怎么产生的呢？

原来ECharts图表组件内部有一个机制，用于统计xAxis坐标刻度的个数和图表宽度，从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是：interval。

ECharts可以很方便的在网页上绘制地图，图表，并且可以提供下载图像，放大，缩小，拖动等功能，今天主要说一下它的地图类型（type:＇map＇)是如何实现的．

首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里，它是一个JS的字典对象，由键／值对组成，键表示点的名称，值则表达它的坐标，由经纬度组成，它是一个数组，如[13600,3200]它就表示了一个坐标．

地图类型的图表需要关注的元素

title：标题，显示这个地图所表示的名称

　 title: {

text: '清大云点亮中国',

subtext: 'TsingdaCloud',

sublink: '',

x: 'center',

y: 'top',

textStyle: {

color: '#fff'

}

}

toolbox：工具栏，显示一些显示的工具，放大，缩小，查看数据集，下载图像等

toolbox: {

show: true,

feature: {

mark: { show: true },

dataView: { show: true, readOnly: false },

restore: { show: true },

saveAsImage: { show: true }

}

}

legend：图标显示，当series有多个地图时，这个值用到显示多个地图的图标，可以是横向显示和纵向显示

legend: {

x: 'left',

y: 'top',

data: ['在线', '离线'],//在线和离线对应的是series的名字

selectedMode: false,//选中悬浮

textStyle: {

color: '#fff'

}

}

series：地图显示，用来叠放显示地图，你可以定义多个，它们之间的关系是第一个在最上面，以此类推．

series: [

//默认

{

name: '底层模版',

type: 'map',

mapType: 'china',

data: provinceMap,

geoCoord: source,

itemStyle: {

normal: {

color: bgColor,

borderColor: "#eee",

label: {

show: true,

textStyle: {

color: "#fff"

}

}

}, emphasis: { color: "rgba(128, 128, 128, 05)" }

},

}］

markPoint：点标识，用来标识地图上的后，这些点通常是被存储在一个geoCoord对象上，这个对象是一个字典，这在文章开头已经介绍过．

markPoint: {//动态标记

large: true,//这个选项，悬浮自动失效

symbolSize: 2,

itemStyle: {

normal: {

shadowBlur: 2,

shadowColor: 'rgba(37, 140, 249, 08)',

color: onColor

}

},

data: []

}

markPoint里的data对象是这个地图上需要显示的点，它是一个字符型数组，用来存储geoCoord里的键！

setOption:将地图对象添加到指定的地图对象上

var myChart = echartsinit(documentgetElementById('main'));

var option={};

myChartsetOption(option);

动态构建地图上的点标识markPoint

大概的思路是将要标记的点动态付给geoCoord和markPoint的data对象上，这样就可以动态在地图上标示点了

$get("/map/GetOffMap", function (data) {

for (var i in data) {

optionseries[0]geoCoord[data[i]longitude + "_" + data[i]latitude] = [parseFloat(data[i]longitude), parseFloat(data[i]latitude)];

optionseries[1]markPointdatapush({ name: data[i]longitude + "_" + data[i]latitude });

}

myChartsetOption(option);

不是。

1、echart地图坐标，省市区三级坐标，适应于坐标点展示，坐标位置准确。

2、Echarts地图可以实现：自定义地图数据，但是需要为经纬度坐标系的geojson格式数据。

如何在页面中调用百度地图，直接在你想要插入的页面上调用百度地图代码即可

百度地图调用API地址：>

以上就是关于ECharts 基础使用全部的内容，包括:ECharts 基础使用、echarts如何获取y轴刻度的最大值、如何用ECharts动态在地图上标识点等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！