Echarts迁徙图简单图片实现

最近工作中遇见一些小问题，Echarts实现迁徙图效果，而网上寻找时并没有找到非常合适的案例，大都是基于geo加上js或者json文件实现的，对于初学者而言代码量太大，看到最后也没看懂到底是怎样实现的，所以基于这几天踩得坑给出一个简单案例，也帮助大家少走弯路。

就是这样的效果。

首先是前端代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>迁徙图</title><script src="js/echarts.js"></script><script src="js/jquery-1.12.4.min.js"></script><script src="js/qianxitu.js"></script></head><body>//给出容器，用于echart绑定<div id="main" style="width: 720px;height: 520px;"></div></body>
</html>

然后是js代码

$(function(){var option={xAxis: {type: 'value',show: false,max:30,},yAxis: {type: 'value',show: false,max:10,},series:[{type: 'lines',//这里是选择布局方式，网上大多数都是geo配合js或者json文件，我这里写的是2d                    //坐标形式，可能我形容得不太标准，但是相对比较好理解coordinateSystem: 'cartesian2d',//然后是所在层数，如果学过ps的会很好理解，就是图层的意思zlevel: -1,effect: {symbol: 'arrow',show: true,period: 3, // 箭头指向速度，值越小速度越快trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重symbolSize: 10, // 图标大小},lineStyle: {normal: {color: '#609fd4'}},data: [{coords: [[6, 6],[15, 7],],lineStyle:{// Echarts在js中有些配置要写在normal: {}这个方法体内，// 不写的话不出效果，如果在前端直接写的话不需要，// 具体原因我也不太清楚normal: {opacity: 0.1, // 线的透明度-设置为0，隐藏线条curveness: 0.3, // 曲线的弯曲程度color: '#609fd4'},}},{coords: [[11, 2],[15, 7],],lineStyle:{normal: {opacity: 0.1, // 线的透明度-设置为0，隐藏线条curveness: 0.3, // 曲线的弯曲程度 ，color: '#4fb6d2',},}},{coords: [[8, 3],[15, 7],],lineStyle:{normal: {opacity: 0.1, // 线的透明度-设置为0，隐藏线条curveness: 0.3, // 曲线的弯曲程度 ，color: '#4ab2e5',},}},{coords: [[22, 8],[15, 7],],lineStyle:{normal: {opacity: 0.1, // 线的透明度-设置为0，隐藏线条curveness: -0.3, // 曲线的弯曲程度 ，多段线不支持弯曲color: '#52b9c7',},}}]},{ // 这里必须有scatter，至少有一个点，路径图才会跑起来type: 'effectScatter',zlevel: 2,symbolSize: 20,rippleEffect: { //涟漪特效normal: {period: 4, //动画时间，值越小速度越快brushType: 'stroke', //波纹绘制方式 stroke, fillscale: 4 //波纹圆环最大限制，值越大波纹越大}},label: {normal: {show: true,position: 'inside',//在圆环中添加显示的文字，从下方data中获取//在前端写的话就是 formatter:'{@[2]}'的写法formatter: function(params){return params.data[2];},}},data: [[22, 8,'A'],[8, 3,'B'],[11, 2,'C'],[6, 6,'D'],[15, 7,'A'],],},],graphic:{elements:[{type: "image",zlevel: -3,z: 3,style: {//添加自己的背景图image: ./img/ditu.png',width: 800,height: 525,},top: 20,left: 0,scale: [1, 1]}]},};//绑定前端页面提供的容器var eCharts = echarts.init($("#main")[0]);//调用我们上面的配置eCharts.setOption(option);
})

写的可能不是很好，但是相比那些又臭又长看半天还看不懂的还是比较好接受的，希望对大家可以有一些帮助

Echarts迁徙图简单图片实现相关推荐

Echarts迁徙图
Echarts迁徙图 "echarts": "^5.1.1", 在node_modules中找到echarts创建map/js/.china.js /* * L ...
html怎么绘制飞线,绘制飞线，echarts迁徙图原理
其实是在元素上绘制了一条线,然后利用canvas 的createLinearGradient函数不断移动线段的样式位置来实现. 因此首先绘制线段 ctx.beginPath(); ctx.moveTo ...
echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
前言此系列共分为以下几篇 <vue中高德地图的使用> <vue中基于高德的多行政区域覆盖> <vue中高德搭配echarts做数据迁徙流线图> (本篇) 本篇效果 ...
ArcGIS底图+eCharts 迁徙图图显示与隐藏
通过使用Echarts3Layer.js扩展,可以实现在ArcGIS底图上添加eCharts图表,可以简单得到比ArcGIS API for JS更好的效果. 一般的eCharts图表可以通过clea ...
echarts迁徙图 vue_【可视化插件】Vue项目中Echarts流向图迁徙图实现
public render() { //图表绘制方法 this.chart.clear(); const isMock = !this.items.length; const items = isMo ...
Echarts 开发静态数据模拟实现迁徙图步骤详解
文章目录一.前言二.先来看看百度迁徙图三.Echarts 实现迁徙图基本步骤第一步:引入Echarts.js及相关JS 第二步:为ECharts准备一个Dom 第三步:基于Dom初始化echa ...
python画人口迁徙图_echarts 手把手教你画迁徙图（城市内部级别+百度地图支持）2...
最近要做一个上海的迁徙图,搜到的都是 echarts 和mapv一样,有自己的API说明和demo 形式上非常相近,而且看起来功能比mapv更加完善. 另外是滴滴的一个蝌蚪迁徙图,看起来是真实轨迹的模 ...
Echarts4+EchartsGL 3D迁徙图（附源码）
最近遇到些Echarts迁徙图问题,在实现二维地图的迁徙图后开始开发3D迁徙图,在网上一查,发现3D版本迁徙图资料较少,自己研究并借鉴一些资料后写了一个小demo,希望能帮大家少走些弯路,共同学习. ...
Mapbox + ECharts 实现简单迁徙图
文章目录概述预览效果实现代码说明相关链接概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果实现代码 & ...
地图 svg中国地图、echarts百度迁徙图
总结下最近使用过的地图控件: 第一种 svg中国地图 demo:http://www.oschina.net/code/snippet_54124_36979 这个很简单,照着demo里面直接调用就可 ...

Echarts迁徙图简单图片实现

Echarts迁徙图简单图片实现相关推荐

最新文章

热门文章