课程名称：Vue + EChart 4.0 从0到1打造商业级数据报表项目
课程章节：重构分类销售排行组件开发与销售大盘基础设置
课程讲师： Sam
课程内容：
重构复杂的环形销售排行榜，
// 定制数据配置环形图
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来设置进入显示提示的功能，还有合并两个数据等
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦