echarts中的散点图极坐标系展现上半圆时钟图

1.应用场景

项目中需要实现下图红框中的上半月类似时钟的设计图，其中‘90’和‘3’都是动态变化的（后端返回的数据）。设计图中白色大头针的个数随着分数的增减而顺时针增减，浅蓝色的大头针随着分数的增减而逆时针增减，增减时针方向每增一个白色大头针（同时减少一个浅蓝色大头针）代表分数增加10分。

２.前端实现半圆时钟的思路

根据应用场景，很容易想到使用echarts来实现。经过查找echarts各种图形，最后确定使用极坐标系的散点图来开发。控制极坐标的配置项有三个：polar（极坐标系）、radiusAxis(极坐标系的径向轴)、angleAxis（极坐标系的角度轴），配合series中type=scatter来最终实现设计图上的上半圆形图案。极坐标系中的散点图，会根据圆形上的刻度值及径向轴上的刻度值来展示不同位置的点（本例中为大头针）。

３.前端代码实现步骤:

(1)polar极坐标系配置如下:
　polar（极坐标系）控制整个圆形的大小及位置，radius控制大小，center控制位置

polar: {radius:'100%',// 极坐标系的半径,极坐标占容器的比例center: ['50%', '50%'],//极坐标系的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标.支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
},

(2) radiusAxis极坐标系的径向轴配置如下:
radiusAxis(极坐标系的径向轴)使用第一个刻度标签结合rich富文本来实现圆形内部文本的展示。

radiusAxis: {type:'category',axisLabel:{//   backgroundColor:'blue',color:'rgba(255,255,255,1)',fontFamily:'PingFangSC-Semibold',//   fontSize: 20,width:60,
//     height: 45,margin:-5,align:'center',verticalAlign:'center',formatter(data){return ['{a|'+data.substr(0,2)+'}','{b|'+data.substr(2,1)+'}','{c|\n'+data.substr(3)+'}'].join('')},rich:{a: {//  backgroundColor:'black',color: 'rgba(255,255,255,1)',fontSize:this.relativeRate*60,fontWeight:'normal',verticalAlign:'bottom',height: this.relativeRate*75,lineHeight:this.relativeRate*115,},b: {//  backgroundColor:'yellow',color: 'rgba(255,255,255,1)',fontSize:this.relativeRate*30,verticalAlign:'bottom',height: this.relativeRate*60,lineHeight:this.relativeRate*65,},c: {color: 'rgba(255,255,255,1)',fontSize:this.relativeRate*20,verticalAlign:'bottom',fontWeight:'bold',},},},axisLine:{show:true,},axisTick:{show:true,},data:radiusData,},

(3) angleAxis极坐标系的角度轴配置:
将角度轴（即圆形）上刻度评分为20个刻度值，这样上半部就是11个刻度值，整好实现了设计图上的图形。

var angleData = [],// 径向轴数据angleSplit = 1,
while(angleSplit<21){angleData.push(angleSplit);angleSplit=angleSplit+1;
}
angleAxis: {type:'category',//   min: 0,//   max: 360,//   interval: 18,//  splitNumber: 26,axisLine:{show:true,},axisTick:{show:true,},axisLabel:{show:true,},startAngle: 99,data:angleData,
},

(4)series系列散点图的配置:
series系列散点图数据data要配合角度轴上的刻度数目来实现，根据角度轴上半部分的刻度数为11个，故series的data中数据也应该有11个，分别对应[0,10,20,30,40,50,60,70,80,90,100]数组中的元素，且symbol标记图形的值为“pin”大头针，再设置大头针的颜色、大小、旋转角度。

let dataSeries =[],radiusTick = 1,angleInt = 15,degreeRight = 90;
/**返回series的数据项，codeColor为后端传过来的客户得分**/
function seriesItem(radius,angleInt,degree,greade){let seriesItem =  {name:'',value:[radius,angleInt],symbolRotate:degree,// symbol标记旋转角度itemStyle:{color:greade>=dataSeriesIndex?'rgba(255,255,255,1)':'rgba(13,156,217,1)'}};return seriesItem;
}
/**生成不同旋转角度、不同刻度值的series的data**/
while(dataSeriesIndex<101){angleInt>20?angleInt=1:'';dataSeries.push(seriesItem(radiusTick,angleInt,degreeRight,greade));angleInt+=1;degreeRight=degreeRight-18;dataSeriesIndex=dataSeriesIndex+10;
}
series: [{name: '',type: 'scatter',symbol:'pin',symbolSize:[9,15],silent:true,// 不响应鼠标itemStyle:{color:'rgba(13,156,217,1)'},coordinateSystem: 'polar',data:dataSeries
}]

(5)生成图形:
根据以上4个步骤，生成最终图形如下：

将径向轴和角度轴上的轴线（axisLine）、刻度线（axisTick）、刻度标签（axisLabel）隐藏，同时将极坐标系的位置线下移动，最终变成如下图形：

4. 案例代码及最终实现图形：

以下案例代码中，需要引入echarts插件（this.echarts），实现手机端适配(this.relativeRate)。

<template><div class="full"><!--时钟图--><div class="clock_parent"><div id="clockID" ref="clockREF" class="clock_css"></div></div></div>
</template><script>export default {name: "ClockChart",methods:{/**上半圆时钟图，grade-分数，percent-全国排名百分比**/initClock(greade,percent){var angleData = [],// 径向轴数据angleSplit = 1,//   greade = '70',//为后端传过来的客户得分dataSeries=[],// series数据dataSeriesIndex = 0,radiusData = [greade+'分综合竞争力全国前'+percent+'%',''];// 角度轴数据while(angleSplit<21){angleData.push(angleSplit);angleSplit=angleSplit+1;}console.log('angleData:',angleData);/**codeColor为后端传过来的客户得分**/function seriesItem(radius,angleInt,degree,greade){let seriesItem =  {name:'',value:[radius,angleInt],symbolRotate:degree,itemStyle:{color:greade>=dataSeriesIndex?'rgba(255,255,255,1)':'rgba(13,156,217,1)'}};return seriesItem;}let radiusTick = 1,angleInt = 15,degreeRight = 90;while(dataSeriesIndex<101){angleInt>20?angleInt=1:'';dataSeries.push(seriesItem(radiusTick,angleInt,degreeRight,greade));angleInt+=1;degreeRight=degreeRight-18;dataSeriesIndex=dataSeriesIndex+10;}console.log('dataSeries:',dataSeries);let option = {//   backgroundColor:'rgba(76,191,234,1)',polar: {radius:'100%',center: ['50%', '75%'],},angleAxis: {type:'category',//   min: 0,//   max: 360,//   interval: 18,//  splitNumber: 26,axisLine:{show:false,},axisTick:{show:false,},axisLabel:{show:false,},startAngle: 99,data:angleData,},radiusAxis: {type:'category',//    min: 0,//    max: 200,axisLabel:{//   backgroundColor:'blue',color:'rgba(255,255,255,1)',fontFamily:'PingFangSC-Semibold',//   fontSize: 20,width:60,//     height: 45,margin:-5,align:'center',verticalAlign:'center',formatter(data){return ['{a|'+data.substr(0,2)+'}','{b|'+data.substr(2,1)+'}','{c|\n'+data.substr(3)+'}'].join('')},rich:{a: {//  backgroundColor:'black',color: 'rgba(255,255,255,1)',fontSize:this.relativeRate*60,fontWeight:'normal',verticalAlign:'bottom',height: this.relativeRate*75,lineHeight:this.relativeRate*115,},b: {//  backgroundColor:'yellow',color: 'rgba(255,255,255,1)',fontSize:this.relativeRate*30,verticalAlign:'bottom',height: this.relativeRate*60,lineHeight:this.relativeRate*65,},c: {color: 'rgba(255,255,255,1)',fontSize:this.relativeRate*20,verticalAlign:'bottom',fontWeight:'bold',//  height: 30,//  lineHeight:50,},},},axisLine:{show:false,},axisTick:{show:false,},data:radiusData,},series: [{name: '',type: 'scatter',symbol:'pin',symbolSize:[9,15],silent:true,// 不响应鼠标itemStyle:{color:'rgba(13,156,217,1)'},coordinateSystem: 'polar',data:dataSeries}]};let clockE = this.echarts.init(this.$refs.clockREF);clockE.setOption(option);}},mounted(){this.initClock(90,3);}}
</script><style scoped>.full{width: 100%;height: 100%;display: flex;justify-content:center;}.clock_parent{width: 2.2rem;height: 1.7rem;position: relative;text-align: center;overflow: hidden;background-color: rgba(76,191,234,1);display: flex;justify-content:center;align-items:flex-end;}.clock_css{width: 2rem;height: 2rem;/* margin-top: -.8rem;*/}
</style>