<!-- 为echarts准备一个具备大小（宽高）的dom -->
<div class="main-echarts-contianer"
? ? ?ref="main">
</div>

.main-echarts-contianer {
? width: 480px;
? height: 320px;
? display: flex;
? align-items: center;
? justify-content: center;
}

drawclockchart () {
? // 指定图表的配置项和数据
? let option = {
? ? 'series': [
? ? ? {
? ? ? ? 'name': '个人指标',
? ? ? ? 'type': 'gauge',
? ? ? ? 'radius': '65%',
? ? ? ? 'startangle': '240',
? ? ? ? 'endangle': '-60',
? ? ? ? // 图表的刻度分隔段数
? ? ? ? 'splitnumber': 5,
? ? ? ? // 图表的轴线相关
? ? ? ? 'axisline': {
? ? ? ? ? 'show': true,
? ? ? ? ? 'linestyle': {
? ? ? ? ? ? 'color': [
? ? ? ? ? ? ? [
? ? ? ? ? ? ? ? 0.9,
? ? ? ? ? ? ? ? new this.$echarts.graphic.lineargradient(0, 0, 1, 0, [{
? ? ? ? ? ? ? ? ? offset: 0,
? ? ? ? ? ? ? ? ? color: '#ffd900'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? offset: 1,
? ? ? ? ? ? ? ? ? color: '#ff8000'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ])
? ? ? ? ? ? ? ],
? ? ? ? ? ? ? [1, '#56606e']
? ? ? ? ? ? ],
? ? ? ? ? ? 'width': 15
? ? ? ? ? }
? ? ? ? },
? ? ? ? // 图表的刻度及样式
? ? ? ? 'axistick': {
? ? ? ? ? 'linestyle': {
? ? ? ? ? ? 'color': '#0f1318',
? ? ? ? ? ? 'width': 2
? ? ? ? ? },
? ? ? ? ? 'length': 15,
? ? ? ? ? 'splitnumber': 1
? ? ? ? },
? ? ? ? // 图表的刻度标签(20、40、60等等)
? ? ? ? 'axislabel': {
? ? ? ? ? 'distance': -8,
? ? ? ? ? 'textstyle': {
? ? ? ? ? ? 'color': '#9e9e9e'
? ? ? ? ? }
? ? ? ? },
? ? ? ? // 图表的分割线
? ? ? ? 'splitline': {
? ? ? ? ? 'show': false
? ? ? ? },
? ? ? ? // 图表的指针
? ? ? ? 'pointer': {
? ? ? ? ? 'show': false
? ? ? ? },
? ? ? ? // 图表的数据详情
? ? ? ? 'detail': {
? ? ? ? ? 'formatter': function (params) {
? ? ? ? ? ? return '{title|' + '总体得分}' + '\n' + '{score|' + params + '}'
? ? ? ? ? },
? ? ? ? ? 'offsetcenter': [0, 0],
? ? ? ? ? 'rich': {
? ? ? ? ? ? 'title': {
? ? ? ? ? ? ? 'fontsize': 12,
? ? ? ? ? ? ? 'color': '#9e9e9e',
? ? ? ? ? ? ? 'lineheight': 30
? ? ? ? ? ? },
? ? ? ? ? ? 'score': {
? ? ? ? ? ? ? 'fontsize': 27,
? ? ? ? ? ? ? 'color': '#fff'
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? // 图表的标题
? ? ? ? 'title': {
? ? ? ? ? 'offsetcenter': [0, '90%'],
? ? ? ? ? 'color': '#fff',
? ? ? ? ? 'fontsize': 14
? ? ? ? },
? ? ? ? 'data': [{
? ? ? ? ? 'name': '完成',
? ? ? ? ? 'value': 31
? ? ? ? }]
? ? ? },
? ? ? {
? ? ? ? 'name': '外层线',
? ? ? ? 'type': 'gauge',
? ? ? ? 'radius': '72%',
? ? ? ? 'startangle': '240',
? ? ? ? 'endangle': '-60',
? ? ? ? 'center': ['50%', '50%'],
? ? ? ? 'axisline': {
? ? ? ? ? 'linestyle': {
? ? ? ? ? ? 'width': 1,
? ? ? ? ? ? 'color': [[1, '#56606e']]
? ? ? ? ? }
? ? ? ? },
? ? ? ? 'splitline': {
? ? ? ? ? 'length': -6,
? ? ? ? ? 'linestyle': {
? ? ? ? ? ? 'opacity': 0
? ? ? ? ? }
? ? ? ? },
? ? ? ? 'axislabel': {
? ? ? ? ? 'show': false
? ? ? ? },
? ? ? ? 'axistick': {
? ? ? ? ? 'splitnumber': 1,
? ? ? ? ? 'linestyle': {
? ? ? ? ? ? 'opacity': 0
? ? ? ? ? }
? ? ? ? },
? ? ? ? 'detail': {
? ? ? ? ? 'show': false
? ? ? ? },
? ? ? ? 'pointer': {
? ? ? ? ? 'show': false
? ? ? ? }
? ? ? }
? ? ]
? }
? let tempval = 0
? clearinterval(this.clockcharttimer)
? this.clockcharttimer = setinterval(() => {
? ? if (tempval > this.myivstrability) {
? ? ? clearinterval(this.clockcharttimer)
? ? ? // 最后转到最终数据的地方
? ? ? option.series[0].data[0].value = this.myivstrability
? ? ? option.series[0].axisline.linestyle.color[0][0] = this.myivstrability / 100
? ? ? // 使用刚指定的配置项和数据显示图表
? ? ? this.mychart.setoption(option)
? ? ? // 初始化渲染完成
? ? ? this.rendercompleted = true
? ? ? return
? ? }
? ? option.series[0].data[0].value = tempval
? ? option.series[0].axisline.linestyle.color[0][0] = tempval / 100
? ? // 使用刚指定的配置项和数据显示图表。
? ? this.mychart.setoption(option)
? ? tempval++
? }, 20)
? // 此处监听浏览器的resize，重新渲染图表
? let that = this
? window.addeventlistener("resize", function () {
? ? cleartimeout(that.resizetimer)
? ? that.resizetimer = settimeout(() => {
? ? ? mychart.resize()
? ? }, 500)
? })
}