echarts环图配置

echarts环图配置

1、安装echarts

npm install echarts@4.9.0

2、页面引入echarts

import echarts from 'echarts';

3、应用

template片段

<div class="chart-wrap"><div id = "treeChart" style = "width: 180px; height:180px;" ></div><div class="total" :style="{color: handleThemeColor(totlal).titleColor}">{{ totlal >= 8 ? '优秀' : totlal <= 3 ? '不及格' : '及格' }}</div>
</div>

script方法

showChart() {let myChart = echarts.init(document.getElementById('treeChart'));let value = this.totlal; //当前进度let maxValue = 10; //进度条最大值let startBg = this.circleColor.start;let endBg = this.circleColor.end;let option = {legend: {orient: 'vertical',x: 'left',},graphic: [//内容 + 位置{type: 'text',left: 'center',top: '30%',z: 2,zlevel: 100,style: {text: '总得分',textAlign: 'center',fill: '#666666',fontSize: 12,},},{type: 'text',left: 'center',top: '46%',z: 2,zlevel: 100,style: {text: this.totlal,textAlign: 'center',fill: this.themeColor,fontSize: 62,},},],series: [// 进度条{startAngle: 210,type: 'pie',radius: ['72%', '100%'],labelLine: {normal: {show: false,},},hoverAnimation: false, //鼠标悬浮是否有区域弹出动画，false:无 true:有avoidLabelOverlap: false,silent: true, //取消鼠标移入高亮效果: 不响应和触发鼠标事件animationEasing: 'cubicOut',data: [//value当前进度 + 颜色{value: value,itemStyle: {//渐变颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: startBg, // 0% 处的颜色},{offset: 1,color: endBg, // 100% 处的颜色},],global: false, // 缺省为 false},},},{value: maxValue - value,itemStyle: {//渐变颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#eee', // 0% 处的颜色},{offset: 1,color: '#eee', // 100% 处的颜色},],global: false, // 缺省为 false},},},//(maxValue进度条最大值 - value当前进度) + 颜色{value: 5,itemStyle: {// 径向渐变颜色color: {type: 'radial',x: 1,y: 1,r: 1,colorStops: [{offset: 0,color: '#eee', // 0% 处的颜色},{offset: 1,color: '#eee', // 100% 处的颜色},],global: false, // 缺省为 false},borderColor: '#fff',borderWidth: 6},},],},],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//随着浏览器窗口大小改变而改变window.addEventListener('resize', function () {myChart.resize()})
}

css样式

.chart-wrap {position: absolute;right: 78px;top: -60px;width: 200px;height: 200px;border-radius: 50%;background: #FFFFFF;overflow: hidden;
}#treeChart {position: absolute;top: 10px;left: 10px;
}.total {position: absolute;left: 50%;transform: translateX(-50%);bottom: 13px;font-size: 16px;font-weight: 500;
}

最终效果