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

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

课程章节：开发支付转化率组件以及词云图的基本用法
课程讲师： Sam

课程内容：
开发支付转化率组件，根据上一节课的学到的知识完成这节课的内容，首先新建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