为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第23天 开发支付转化率组件以及词云图的基本用法

【金秋打卡】第23天 开发支付转化率组件以及词云图的基本用法

2022.11.15 13:10 77浏览

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

课程内容:
开发支付转化率组件,根据上一节课的学到的知识完成这节课的内容,首先新建LiquidFill.vue组件,再在MapView.vue中引用代码如下:

<ve-liquidfill :data="chartData" height="100%" :settings="chartSettings" />
<script>
// 根据不同的百分比显示不同的颜色值,自定义了水球图的颜色显示
function getColor(value) {
    return value > 0 && value <= 0.5 ? 'rgba(97,216,0,.7)'
      : value > 0.5 && value <= 0.8 ? 'rgba(204,178,26,.7)'
        : value > 0.8 ? 'rgba(241,47,28,.7)' : '#c7c7cb'
  }
	export default {
		data(){
			return {
				chartData:{
					columns:['title','percent']
					rows:[
						{
							title:'rate',
							percent:0.68
						}
					]
				},
				chartSettings:{
					seriesMap:{
					'rate':{
						radius:'80%',
						label:{
							normal:{
								formatter:(v)=>{
									return `${Math.floor(v.data.value*100)}%`
								},
								textStyle:{
									fontSize:36,
									color:'#999',
									fontWeight:'normal'
								},
								position:['50%','50%']
							}
						},
						outline: {
			                itemStyle: {
			                  borderColor: '#aaa4a4',
			                  borderWidth: 1,
			                  color: 'none',
			                  shadowBlur: 0,
			                  shadowColor: '#fff'
			                },
			                borderDistance: 0
			              },
			              backgroundStyle: {
			                color: '#fff'
			              },
			              itemStyle: {
			                shadowBlur: 0,
			                shadowColor: '#fff'
			              },
			              amplitude: 8,
			              color: [getColor(this.chartData.rows[0].percent)]
					}}
				}
			}
		}
	}
</script>

// mapview中引用
// 词云组件开发,首先安装词云插件

// npm i install echarts-worodcloud  
<ve-wordcloud :data="chartData" height="100%" :settings="chartSettings" />
<script>
  export default {
    data() {
      return {
        chartData: {
	        colums:['name','value'],
	        rows:[
		        {
			        name:'慕课网',
			        value:100*Math.randon()
		        },
		         {
			        name:'慕课网',
			        value:100*Math.randon()
		        },
		         {
			        name:'慕课网',
			        value:100*Math.randon()
		        }
	        ]
        },
        chartSettings: {
          color: ['rgba(97,216,0,.7)', 'rgba(204,178,26,.7)', 'rgba(245,166,35,.7)', 'rgba(156,13,113,.7)']
        }
      }
    }
  }
</script>

课程收获:
学习了通过插件在vue中添加水球图,然后再根据不同的百分比显示不同的颜色值,自定义了水球图的颜色显示,自定义颜色显示,可以给用户更好,更加完善的体验,再有就是使用formatter自定义转化率的显示,得到项目需求的样式,又学了了使用echarts-worodcloud插件开发词云的效果,使用情况也是通过echarts中插件形式引用,类比水球图的实现,相对水球图来说这个的配置跟展现形式简单些,然后随机生成逍遥的百分比,再chartSetings中配置前面的颜色值,对于随机生的来说这个就i单调一点了
加油ing

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

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

评论

作者其他优质文章

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

举报

0/150
提交
取消