vue中echarts迁徙图

最近大屏做的比较多，记录一下
先看图

//地图子组件，子组件直接复制，就可以，父组件在给传值，下面都有例子
这个目前只能加载China，还是world，还是中国的省，市级地图要自己在网上找一下，在渲染
推荐一个地图json的地址
地图json文件下载

<template><div ref="map" />
</template>
<script>
import 'echarts/map/js/china.js' // 引入中国地图数据
import 'echarts/map/js/province/guangdong.js'
/*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/
export default {props: {select: {//用来判断是加载哪个地图，China，还是world，还是广东type: String},datas: {type: Array,required: true}},data () {return {//下面是经纬度，用哪个地方的就填哪个地方的就可以geoCoordMap: {'黑龙江': [127.9688, 45.368],'内蒙古': [110.3467, 41.4899],'吉林': [125.8154, 44.2584],'辽宁': [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],'北京': [116.4551, 40.2539],'四川': [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],'广州市': [113.264385, 23.129112],'云浮市': [112.044439, 22.929801],'韶关市': [113.597313, 24.811094],'惠州市': [114.412599, 23.079404],'深圳市': [114.085947, 22.547],'汕头市': [116.708463, 23.37102],'佛山市': [113.122717, 23.028762],'江门市': [113.094942, 22.590431],'湛江市': [110.364977, 21.274898],'茂名市': [110.919229, 21.659751],'肇庆市': [112.472529, 23.051546],'梅州市': [116.117582, 24.299112],'汕尾市': [115.364238, 22.774485],'河源市': [114.697802, 23.746266],'阳江市': [111.975107, 21.859222],'东莞市': [113.746262, 23.046237],'揭阳市': [116.355733, 23.543778],'潮州市': [116.62286, 23.656324],'珠海市': [113.553986, 22.224979],'澄海市': [116.756092, 23.46596],'清远市': [113.056892, 23.680117],'中山市': [113.382391, 22.521113]}// Datas: [//   [{ name: '黑龙江', value: 0 }, { name: '广东' }],//   [{ name: '内蒙古', value: 10 }, { name: '广东' }],//   [{ name: '吉林', value: 10 }, { name: '广东' }],//   [{ name: '辽宁', value: 10 }, { name: '广东' }],//   [{ name: '河北', value: 10 }, { name: '广东' }]]}},watch: {datas (n, o) { // 不要使用箭头函数  不然会发生this改变this.mapEchartsInit()}},mounted () {this.mapEchartsInit()},methods: {mapEchartsInit () {const self = thisconst convertData = function (data) {const res = []for (let i = 0; i < data.length; i++) {const dataItem = data[i]const fromCoord = self.geoCoordMap[dataItem[0].name] // 迁出点const toCoord = self.geoCoordMap[dataItem[1].name] // 迁入点if (fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value}, {coord: toCoord}])}}return res}const series = [];// 迁入地特殊显示//广东[[`${self.datas[0][1].name}`, self.datas]].forEach(function (item, i) {series.push({type: 'lines',zlevel: 2,effect: {show: true,period: 4, // 箭头指向速度，值越小速度越快trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', // 箭头图标symbolSize: 5 // 图标大小},lineStyle: {normal: {width: 0.2, // 尾迹线条宽度opacity: 1, // 尾迹线条透明度curveness: 0.3 // 尾迹线条曲直度}},data: convertData(item[1])}, {type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: { // 涟漪特效period: 4, // 动画时间，值越小速度越快brushType: 'stroke', // 波纹绘制方式 stroke, fillscale: 3 // 波纹圆环最大限制，值越大波纹越大},label: {normal: {show: true,position: 'right', // 显示位置offset: [5, 0], // 偏移设置formatter (params) { // 圆环显示文字return params.data.name},fontSize: 13},emphasis: {show: true}},symbol: 'circle',symbolSize (val) {return 1 + val[2] / 5e3 // 圆环大小},itemStyle: {normal: {show: false,color: '#f00'}},data: item[1].map(function (dataItem) {return {name: dataItem[0].name,value: self.geoCoordMap[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: 20,data: [{name: item[0],value: self.geoCoordMap[item[0]].concat([10])}]})})const option = {tooltip: {trigger: 'item',formatter (params, ticket, callback) {// 根据业务自己拓展要显示的内容let res = ''const name = params.nameconst value = params.value[params.seriesIndex + 1]if (value !== undefined) {res = "<span style='color:#fff;'>" + name + '</span><br/>游客人数：' + valuereturn res}}},backgroundColor: 'rgba(166, 200, 76, 0)',visualMap: { // 图例值控制min: 0,max: 1,calculable: true,show: false,color: ['#4169E1', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],textStyle: {color: '#fff'}},geo: {map: `${self.select}`,zoom: 1.2,label: {emphasis: {show: false}},roam: true, // 是否允许缩放itemStyle: {normal: {borderColor: 'rgba(147, 235, 248, 1)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色}, {offset: 1,color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色}],globalCoord: false // 缺省为 false},shadowColor: 'rgba(128, 217, 248, 1)',// shadowColor: 'rgba(255, 255, 255, 1)',shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10},emphasis: {areaColor: '#389BB7',borderWidth: 0}}},series}const myChart = this.$echarts.init(this.$refs.map)myChart.setOption(option, true)// console.log(option)window.addEventListener('resize', function () {myChart.resize()})}}
}
</script>

父组件调用

<template><div><mapbar :select="mapprov" :datas="cityDatas" :style="{width: '100%', height: `${map_canvas}`}" />  //中国地图<mapbar :select="mapchina" :datas="provDatas" :style="{width: '100%', height: `${map_canvas}`}" />  //广东地图<!--因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染--></div></template>
<script>
import mapbar from '~/components/common/map'
export default {components: { mapbar //地图},data(){return {mapchina: 'china',mapprov: '广东',map_canvas:'26vh',// 地图迁徙图设置provDatas: [[{ name: '黑龙江', value: 0 }, { name: '广东' }],[{ name: '内蒙古', value: 10 }, { name: '广东' }],[{ name: '吉林', value: 10 }, { name: '广东' }],[{ name: '辽宁', value: 10 }, { name: '广东' }],[{ name: '河北', value: 10 }, { name: '广东' }]],cityDatas: [[{ name: '佛山市', value: 3 }, { name: '茂名市' }],[{ name: '东莞市', value: 10 }, { name: '茂名市' }],[{ name: '揭阳市', value: 10 }, { name: '茂名市' }],[{ name: '汕头市', value: 10 }, { name: '茂名市' }],[{ name: '惠州市', value: 10 }, { name: '茂名市' }]],}}}</script>

vue中echarts迁徙图相关推荐

vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
Vue将页面中Echarts动态图导出Gif动图
Vue将页面中Echarts动态图导出Gif动图首先,准备工作需要三个依赖的js 第一个js采用npm进行安装: npm install html2canvas 第二个js采用下载放入项目中进行使用 ...
Echarts迁徙图
Echarts迁徙图 "echarts": "^5.1.1", 在node_modules中找到echarts创建map/js/.china.js /* * L ...
vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...

vue中echarts迁徙图

vue中echarts迁徙图相关推荐

最新文章

热门文章