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

【金秋打卡】第21天 重构分类销售排行组件开发,与销售大盘基础设置

2022.11.13 15:06 47浏览

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

课程内容:
重构复杂的环形销售排行榜,

	//  定制数据配置环形图
	
	renderPieChart(){
		const mockData = [
		{
			legendname:"粉面粥铺",
			value:67,
			percent:'15.40%',
			itemStyle:{
			color:'#e7e702'
			},
			name:'粉面粥店 | 15.40%'	
		},
		{
			legendname:"简餐便当",
			value:97,
			percent:'22.30%',
			itemStyle:{
			color:'#e7e702'
			},
			name:'粉面粥店 | 15.40%'	
		}]
		this.categoryOptions = {
			title:[
			{
				text:'品类分布',
				textStyle:{
					fontSize:14,
					color:"#666"
				},
				left:20,
				top:20
			},{
				text:"累计订单量",
				subtext:"320",
				x:34.5%,
				y:42.5%,
				textStyle:{
					fontSize:14,
					color:'#999'
				},
				subTextStyle:{
					fontSize:28,
					color:'#333'
				},
				textAlign:'center'// 设置圆心位置居中显示
			}],
			series:[{
				type:'pie',
				data:mockData,
				label:{
					normal:{
						show:true,
						position:'outter',
						formatter:function(params){
							return params.data,legendname
						}
					}
				},
				center:['35%','50%'], // 圆心的位置
				radius:['45%','60%'],// 把失信饼图设置成环分别是内的半径45% 外半径60%
				labelLine:{ // 设置环形与环形外的文字间的线的大小
					normal:{
						length:5, // 靠近环的小的长度
						length2:3,// 靠近文字的环的长度
						smooth:true// 是否平缓显示
					}
				},
				clockwise:false, //环形数据是否顺逆时针
				itemStyle: { // 定制每一个环形的间距
	              borderWidth: 4, 
	              borderColor: '#fff'
	            }
			}],
			legend: {
	            type: 'scroll', // 滑动
	            orient: 'vertical', // 竖向排列
	            height: 250,
	            left: '70%', // 左位置修改
	            top: 'middle', // 中间居中
	            textStyle: {// 设置右侧名称的文字大小
	              color: '#8c8c8c'
	            }
	          },
	          tooltip: {// 定制弹层
	            trigger: 'item',
	            formatter: function (params) {
	              const str = params.seriesName + '<br />' +
	                params.marker + params.data.legendname + '<br />' +
	                '数量:' + params.data.value + '<br />' +
	                '占比:' + params.data.percent + '%'
	              return str
	            }
	          }
		}
	}

type:pie
data: 为传入的数据对象
label 为显示的说明。 默认显示外卖 可以改成position:innner
label - formatte 为显示的名字,与mockData有关系
center: 中心点位置
radius : 内外半径
labeline :外面的 标题指向 线段, 有两段 是折线
clockwise :数据是否顺逆时针

地图组件开发
components/BMap.vue4

<template>
	
</template>
<script>
	import 'echarts/extenssion/bmap/bmap'
	// 模拟数据
	const testPoint = [{
		name:'澳门',
		value:[121.15,31.89,89]
	},{
		name:'南京',
		value:[118.78,32.04,89]
	}]
	const testPoint2 = [{
		name:'澳门',
		value:[121.15,31.89,89]
	},{
		name:'南京',
		value:[118.78,32.04,89]
	}]
	数据合并
	  const convertData = function (data, geo) {
	    const res = []
	    data.forEach(item => {
	      const { name, value } = item
	      const coord = geo[name]
	      res.push({
	        name,
	        value: [...coord, value]
	      })
	    })
	    return res
	  }

	// 定制经纬度
	export default {
		data(){
			return {
				options:{
					title: {
			          text: '慕课外卖销售数据大盘',
			          subtext: '销售趋势统计',
			          sublink: 'https://www.imooc.com',
			          left: 'center'
			        },
					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'
			                }
			              }]
			            }
			          }
					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' // 阴影的颜色
				            }
				          }
						
					]
				}
			}
			
		}
	}
</script>

课程收获:
学习了环形的饼状图的实现,先实现饼状图,再radius设置成环形,再分别给每一个元素设置不同的颜色,还可以修改文字的线的距离,还有单个的数据的描述展示,还学习到了如何引入百度地图的实现销售大盘,根据数据展示不同的大小设置,tooltip来设置进入显示提示的功能,还有合并两个数据等

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

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

评论

作者其他优质文章

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

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

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

风间影月说签约讲师

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

进入讨论

Tony Bai 说签约讲师

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

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

举报

0/150
提交
取消