课程名称: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