创新互联ECharts教程：ECharts线图：绘制线数据

ECharts 线图

什么是 ECharts 线图（series[i]-lines）？该图用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。

专注于为中小企业提供网站制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业定结免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

ECharts 2.x 里会用地图上的 markLine 去绘制迁徙效果，在 ECharts 3 里建议使用单独的 lines 类型图表。

迁徙示例：

点击编辑实例 》》

线路图属性

type

此处的 type 值为 'lines'。

name

系列名称，用于 tooltip 的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

coordinateSystem

该系列使用的坐标系，可选值如下：

• 'cartesian2d'：使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex、yAxisIndex指定相应的坐标轴组件。

• 'geo'（默认值）：使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。

xAxisIndex

使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。

yAxisIndex

使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。

geoIndex

使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。

polyline

是否是多段线。

默认为 false，只能用于绘制只有两个端点的线段，线段可以通过 lineStyle.normal.curveness 配置为曲线。

如果该配置项为 true，则可以在 data.coords 中设置多于 2 个的顶点用来绘制多段线，在绘制路线轨迹的时候比较有用，见示例 北京公交路线，设置为多段线后 lineStyle.normal.curveness 无效。

effect

线特效的配置，见示例 模拟迁徙 和 北京公交路线

注意： 所有带有尾迹特效的图表需要单独放在一个层，也就是需要单独设置 zlevel，同时建议关闭该层的动画（animation: false）。不然位于同个层的其它系列的图形，和动画的标签也会产生不必要的残影。

large

是否启用大规模线图的优化，默认为 false，在数据图形特别多的时候（>=5k）可以开启。

开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。

缺点：优化后不能自定义设置单个数据项的样式，不能启用 effect。

largeThreshold

开启绘制优化的阈值，默认为 2000。

symbol

线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。 具体支持的格式可以参考：标线的 symbol

symbolSize

线两端的标记大小，默认为10，可以是一个数组分别指定两端，也可以是单个统一指定。 注意： 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

lineStyle

线路图中的线的样式设置

label

标签相关配置。在 polyline 设置为 true 时无效。

data[i]

线数据集。

注： 为了更好点支持多段线的配置，线数据的格式在 3.2.0 做了一定调整，如下：

// 3.2.0 之前
// [{
//    // 起点坐标
//    coord: [120, 66],
//    lineStyle: { normal: {} }
// }, {
//    // 终点坐标
//    coord: [122, 67]
// }]

// 从 3.2.0 起改为如下配置
{
    coords: [
        [120, 66],  // 起点
        [122, 67]   // 终点
        ...         // 如果 polyline 为 true 还可以设置更多的点
    ],
    // 统一的样式设置
    lineStyle: {
        normal: {}
    }
}

markPoint

图表的标注。

markLine

图表的标线。

markArea

图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。

zlevel

线图所有图形的 zlevel 值。

zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

z

线图组件的所有图形的 z 值，默认值为 2。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。

silent

图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。

animation

是否开启动画，默认为 true。

animationThreshold

是否开启动画的阈值，默认为 2000，当单个系列显示的图形数量大于这个阈值时会关闭动画。

animationDuration

初始动画的时长，默认为 1000，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：

animationDuration: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

animationEasing

初始动画的缓动效果，默认为 cubicOut。不同的缓动效果可以参考 缓动示例。

animationDelay

初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

animationDurationUpdate

数据更新动画的时长，默认为 300。

支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果：

animationDurationUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

animationEasingUpdate

数据更新动画的缓动效果，默认为 cubicOut。

animationDelayUpdate

数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

当前名称：创新互联ECharts教程：ECharts线图：绘制线数据
标题路径：http://www.shufengxianlan.com/qtweb/news1/395551.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联