为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第22天...

【金秋打卡】第22天 利用v-charts重构地图,初识水球图

2022.11.14 19:58 61浏览

课程名称:Vue + EChart 4.0 从0到1打造商业级数据报表项目

课程章节利用v-charts重构地图 / 初识水球图
课程讲师: Sam

课程内容:
使用v-charts 重构地图
BMap2.vue

// 修改vcharts.js
import Vue from 'vue'
import VCharts from 'v-charts'
import 'v-charts/lib/style.css'
// 简单的应用
<template>
	<div>
		<ve-map :data='chartDate' height='800'></ve-map> 
	</div>	
</template>
<script>
	export default {
		data(){
			chartData:{
				columns:['位置','税收'],
				rows:[
					{
					'位置':'上海',
					'税收':'123'
					},
					{
					'位置':'上海',
					'税收':'123'
					},
					{
					'位置':'上海',
					'税收':'123'
					}
				]
			}
		}
	}
</script>
<template>
	<div>
		<ve-bmap :settings='chartSettings' height="100%" :title="title" :tooltip="tooltip" :series='series'></ve-bmap>
	</div>	
</template>
<script>
	export default {
		data(){
		tooltip:{},
		series:[
						{
							name:'',
							type:'scatter',
							coordinateSystem:'bmap',
							data:testPoint,
							encode:{
								value:2
							},
							itemStyle:{
								color:"purple"
							},
							symbolSize:function(val){
								return val[2]/10
							},
							label:{
								show:false,
								position:'right',
								formatter:function(v){
									return `${v.data.name} - ${v.data.value[2]}`
								}
							},
							emphasis:{
								label:{
									show:ture
								}
							}
						},
						{
				            name: 'Top 10',
				            type: 'effectScatter', //添加阴影
				            coordinateSystem: 'bmap',
				            data: convertData(data.sort(function (a, b) {
				              return b.value - a.value
				            }), geo).slice(0, 10),
				            symbolSize: function (val) {
				              return val[2] / 10
				            },
				            encode: {
				              value: 2
				            },
				            label: {
				              formatter: function (v) {
				                return `${v.data.name} - ${v.data.value[2]}`
				              },
				              position: 'right',
				              show: true
				            },
				            hoverAnimation: true, // hover动画
				            rippleEffect: { // 
				              brushType: 'stroke' // 修改波纹线
				            },
				            itemStyle: {
				              color: 'purple',
				              shadowBlur: 10, // 增加阴影 
				              shadowColor: '#333' // 阴影的颜色
				            }
				          }
						
					],
		title:{
			 text: '慕课外卖销售数据大盘',
			 subtext: '销售趋势统计',
			 sublink: 'https://www.imooc.com',
			 left: 'center'
			},
			chartSettings:{
				key:'',
				bmap:{
					center: [104.114129, 37.550339], // 中心点的位置
			        zoom: 5,// 缩放比例
			        roam: false, // 是否允许缩放
			        mapStyle: {
			              styleJson: [{  // 自定义主题
			                'featureType': 'water',
			                'elementType': 'all',
			                'stylers': {
			                  'color': '#d1d1d1'
			                }
			              }, {
			                'featureType': 'land',
			                'elementType': 'all',
			                'stylers': {
			                  'color': '#f3f3f3'
			                }
			              }, {
			                'featureType': 'railway',
			                'elementType': 'all',
			                'stylers': {
			                  'visibility': 'off'
			                }
			              }, {
			                'featureType': 'highway',
			                'elementType': 'all',
			                'stylers': {
			                  'color': '#fdfdfd'
			                }
			              }, {
			                'featureType': 'highway',
			                'elementType': 'labels',
			                'stylers': {
			                  'visibility': 'off'
			                }
			              }, {
			                'featureType': 'arterial',
			                'elementType': 'geometry',
			                'stylers': {
			                  'color': '#fefefe'
			                }
			              }, {
			                'featureType': 'arterial',
			                'elementType': 'geometry.fill',
			                'stylers': {
			                  'color': '#fefefe'
			                }
			              }, {
			                'featureType': 'poi',
			                'elementType': 'all',
			                'stylers': {
			                  'visibility': 'off'
			                }
			              }, {
			                'featureType': 'green',
			                'elementType': 'all',
			                'stylers': {
			                  'visibility': 'off'
			                }
			              }, {
			                'featureType': 'subway',
			                'elementType': 'all',
			                'stylers': {
			                  'visibility': 'off'
			                }
			              }, {
			                'featureType': 'manmade',
			                'elementType': 'all',
			                'stylers': {
			                  'color': '#d1d1d1'
			                }
			              }, {
			                'featureType': 'local',
			                'elementType': 'all',
			                'stylers': {
			                  'color': '#d1d1d1'
			                }
			              }, {
			                'featureType': 'arterial',
			                'elementType': 'labels',
			                'stylers': {
			                  'visibility': 'off'
			                }
			              }, {
			                'featureType': 'boundary',
			                'elementType': 'all',
			                'stylers': {
			                  'color': '#fefefe'
			                }
			              }, {
			                'featureType': 'building',
			                'elementType': 'all',
			                'stylers': {
			                  'color': '#d1d1d1'
			                }
			              }, {
			                'featureType': 'label',
			                'elementType': 'labels.text.fill',
			                'stylers': {
			                  'color': '#999999'
			                }
			              }]
			          },
			          
				}
			}
		}
	}
</script>

初始水球图

// npm i echarts-liquidfill -S   // 安装水球图
var option = {
    series: [{
        type: 'liquidFill', 
        data: [0.6, 0.5, 0.4, 0.3], // 设置三条波纹的透明度
    }]
};
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3],
        color: ['red', '#0f0', 'rgb(0, 0, 255)'],
        itemStyle: { // 设置波纹的透明的
                opacity: 0.6
        },
        emphasis: { // 设置波纹选中的透明的
            itemStyle: {
                opacity: 0.9
            }
        }
    }]
};

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, {  // 单独的对第三个进行设置
            value: 0.3,
            itemStyle: {
                color: 'red',
                opacity: 0.6
            },
            emphasis: {
                itemStyle: {
                    opacity: 0.9
                }
            }
        }]
    }]
};
var option = {
    series: [{
        type: 'liquidFill',
        waveAnimation: false,
        animationDuration: 0,
        animationDurationUpdate: 0, // 设置波纹静止状态
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        amplitude: 0,  // 波纹的振幅大小
        waveAnimation: 0
    }]
};
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            direction: 'left', // 对单个的方向进行设置默认是从左到右的
            itemStyle: {
                color: 'red'
            }
        }, 0.4, 0.3]
    }]
};
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        backgroundStyle: { // 设置水球图的背景的颜色边框
            borderWidth: 5,
            borderColor: 'red',
            color: 'yellow'
        }
    }]
};
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        outline: { // 设置最外层的边框
            show: false
        }
    }]
};
var options = [{
    series: [{
        type: 'liquidFill', // 
        data: [0.6, 0.5, 0.4, 0.3],
        shape: 'diamond' // 设置水球图的形状
    }]
}];

option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3, 0.2],
        shape: 'container', // 全屏显示水球图
        outline: {
            show: false
        }
    }]
};
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.55, 0.4, 0.25],
        radius: '60%',
        outline: {
            show: false
        },
        backgroundStyle: {
            borderColor: '#156ACF',
            borderWidth: 1,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        },
        // 自定义水球图的形状
        shape: '',
        label: {
            position: ['38%', '40%'],
            formatter: function() {
                return 'ECharts\nLiquid Fill';
            },
            fontSize: 40,
            color: '#D94854'
        }
    }]
};

课程收获:
学习到了通过v-charts对地图进行重构,简单的点可以通过地图就行实现,复杂的还是需要引入百度/高德地图进行重构,v-chart的好处是所有的设置可以单独的再data中自定义,方便修改参数,再有认识了水球图的的实现,从安装到使用的方法,再有就是看了水球图参数的基本用法,从波纹,到动画,再到文字边框,颜色等的修改等这些都是额可以很好的做到完善的,利用好插件才可以很好的方便开发使用,继续加油ing


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
13

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

152篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消