echarts中国地图飞线

网上很多代码都不全，只有核心代码，直接cv要么运行不出来，要么报错一大堆，对像我这样的新手及其不友好。这里放上好不容易搞出来的完整代码

直接cv就可食用！

//先确认已经正确引入echarts5.0以下的版本，版本过高可能无法使用

</template>

import * as echarts from 'echarts'//eslint-disable-line no-unused-vars

// import china from '../assets/china'//eslint-disable-line no-unused-vars

import "../../node_modules/echarts/map/js/china"; // 引入中国地图数据

export default {

data() {

return {}

mounted () {

// 初始化echarts实例

this.chinachart = echarts.init(document.getElementById('china_map'))

// 进行相关配置

var chinaGeoCoordMap = {

'黑龙江': [127.9688, 45.368],

'内蒙古': [110.3467, 41.4899],

"吉林": [125.8154, 44.2584],

'宜宾市': [104.630825, 28.760189],

"辽宁": [123.1238, 42.1216],

"河北": [114.4995, 38.1006],

"天津": [117.4219, 39.4189],

"山西": [112.3352, 37.9413],

"陕西": [109.1162, 34.2004],

"甘肃": [103.5901, 36.3043],

"宁夏": [106.3586, 38.1775],

"青海": [101.4038, 36.8207],

"新疆": [87.9236, 43.5883],

"西藏": [91.11, 29.97],

"四川": [103.9526, 30.7617],

"重庆": [108.384366, 30.439702],

"山东": [117.1582, 36.8701],

"河南": [113.4668, 34.6234],

"江苏": [118.8062, 31.9208],

"安徽": [117.29, 32.0581],

"湖北": [114.3896, 30.6628],

"浙江": [119.5313, 29.8773],

"福建": [119.4543, 25.9222],

"江西": [116.0046, 28.6633],

"湖南": [113.0823, 28.2568],

"贵州": [106.6992, 26.7682],

"云南": [102.9199, 25.4663],

"广东": [113.12244, 23.009505],

"广西": [108.479, 23.1152],

"海南": [110.3893, 19.8516],

'上海': [121.4648, 31.2891]

};

// 然后再定义个chinaDatas数组，来存放一些数据，如：

var chinaDatas = [

[{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}],[{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}], [{

value: 0

}],[{

value: 0

}], [{

value: 0

}], [{

value: 1

}]

];

// 可以根据你实际项目需求来添加你的数据。

// 定义中心点和起始点，代码如下：

var convertData = function(data) {

var res = [];

for(var i = 0; i < data.length; i++) {

var dataItem = data[i];

var fromCoord = chinaGeoCoordMap[dataItem[0].name];

var toCoord = [104.630825,28.760189];//中心点地理坐标

if(fromCoord && toCoord) {

res.push([{

coord: fromCoord,

value: dataItem[0].value

}, {

coord: toCoord,

}]);

}

return res;

};

var series = [];

[['宜宾市', chinaDatas]].forEach(function(item, i) {

console.log(item)

series.push({

type: 'lines',

zlevel: 2,

effect: {

show: true,

period: 4, //箭头指向速度，值越小速度越快

trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重

symbol: 'arrow', //箭头图标

symbolSize: 5, //图标大小

lineStyle: {

normal: {

width: 1, //尾迹线条宽度

opacity: 1, //尾迹线条透明度

curveness: .3 //尾迹线条曲直度

}

data: convertData(item[1])

}, {

type: 'effectScatter',

coordinateSystem: 'geo',

zlevel: 2,

rippleEffect: { //涟漪特效

period: 4, //动画时间，值越小速度越快

brushType: 'stroke', //波纹绘制方式 stroke, fill

scale: 4 //波纹圆环最大限制，值越大波纹越大

label: {

normal: {

show: true,

position: 'right', //显示位置

offset: [5, 0], //偏移设置

formatter: function(params){//圆环显示文字

return params.data.name;

fontSize: 13

emphasis: {

show: true

}

symbol: 'circle',

symbolSize: function(val) {

return 5+ val[2] * 5; //圆环大小

itemStyle: {

normal: {

show: false,

color: '#f00'

}

data: item[1].map(function(dataItem) {

return {

//在这里定义你所要展示的数据

value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])

};

}),

//中心点

{

type: 'scatter',

coordinateSystem: 'geo',

zlevel: 2,

rippleEffect: {

period: 4,

brushType: 'stroke',

scale: 4

label: {

normal: {

show: true,

position: 'right',

//offset:[5, 0],

color: '#0f0',

formatter: '{b}',

textStyle: {

color: "#0f0"

}

emphasis: {

show: true,

color: "#f60"

}

symbol: 'pin',

symbolSize: 50,

data: [{

value: chinaGeoCoordMap[item[0]].concat([10]),

}],

}

);

});

this.chartOption = {

// tooltip: {

// trigger: 'item',

// backgroundColor: 'rgba(166, 200, 76, 0.82)',

// borderColor: '#FFFFCC',

// showDelay: 0,

// hideDelay: 0,

// enterable: true,

// transitionDuration: 0,

// extraCssText: 'z-index:100',

// formatter: function(params, ticket, callback) {

// //根据业务自己拓展要显示的内容

// var res = "";

// var name = params.name;

// var value = params.value[params.seriesIndex + 1];

// res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;

// return res;

// }

// },

backgroundColor:"#013954",

visualMap: { //图例值控制

min: 0,

max: 1,

calculable: true,

show: true,

color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],

textStyle: {

color: '#fff'

}

geo: {

map: 'china',

zoom: 1.2,

label: {

emphasis: {

show: false

}

roam: true, //是否允许缩放

itemStyle: {

normal: {

color: 'rgba(51, 69, 89, .5)', //地图背景色

borderColor: '#516a89', //省市边界线00fcff 516a89

borderWidth: 1

emphasis: {

color: 'rgba(37, 43, 61, .5)' //悬浮背景

}

series: series

};

// 使用刚指定的配置项和数据显示地图数据

this.chinachart.setOption(this.chartOption)

}

</script>

.test-title {

background: #146402;

color: #fff;

}

</style>

echarts中国地图飞线相关推荐

echarts中国地图飞线图demo
因为公司要做大屏,需要用到echarts的地图功能,并且要添加飞线功能,在网上查了下资料,翻阅了一下官方文档后,终于是实现出来了直接上代码 <template><div class ...
echarts实现地图飞线
echarts实现地图飞线 echarts画地图 echarts画地图由于地图需要省市区经纬度,需要geoJSON数据,我们使用aliyun官方的JSON数据,以中国地图为例(链接: link.). ...
ECharts 绘制地图飞线
以官方示例为起点进行修改: https://www.echartsjs.com/gallery/editor.html?c=scatter-map 若自行绘制html进行尝试,请记得引入中国地图或者世 ...
echart制作出中国地图飞线图
先上图片参考内容:https://www.makeapie.com/editor.html?c=xm7FhEqj6w&v=2 这里直接展示代码,相关的图标,背景,大部分在代码中都做了注释(背 ...
echart地图飞线图
echart中国地图飞线图(附加省份颜色自定义) 本文参考了模拟迁徙效果图 1.vue项目安装echart,vue-baidu-map:申请百度地图ak npm install echarts -- ...
ECharts+高德卫星地图-飞线图效果
ECharts+高德地图实现卫星地图-飞线图加载资源: https://webapi.amap.com/maps?v=1.4.15&key=申请Key(高德开放平台申请key) echart ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
Echart基于百度地图实现地图飞线
echart社区例子都是基于geo底图实现的底图飞线,现实现基于在线地图实现地图飞线: 原例子ECharts Gallery - 模拟迁徙+百度地图 (makeapie.com) 利用ECharts3 ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...

echarts中国地图飞线

echarts中国地图飞线相关推荐

最新文章

热门文章