一：效果图
二：环境
使用了框架（vue）,运行下面代码前需要先安装echarts。
-
命令通过 npm 安装 ECharts
npm install echarts --save -
引入 ECharts
直接在项目代码中var echarts = require('echarts');得到 ECharts。
三：上代码
<template>
<div>
<div id="fourth"></div>
</div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
data() {
return {
};
},
mounted() {
this.drawCharts();
},
methods: {
drawCharts() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("fourth"));
var e = 80;
var option = {
title: {
show: true,
text: e + "%",
x: "center",
y: "center",// 通过x,y将标题(进度)定位在圆环中心
textStyle: {
fontSize: "25",
color: "white",
fontWeight: "400",
fontFamily: "DINPro, DINPro-Regular",
},
},
tooltip: {
trigger: "item",
formatter: "{d}%",
show: false,
},
legend: {
orient: "vertical",
x: "left",
show: false,
},
series: {
name: "",
type: "pie",
radius: ["65%", "85%"],
avoidLabelOverlap: true,
hoverAnimation: false,
label: {
normal: {
show: false,
position: "center",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: e,
name: "",
itemStyle: {
color: "#6790D8",
},
},
{
value: 100 - e,
name: "",
itemStyle: {
color: "transparent",
},
},
],
},
};
myChart.setOption(option);
},
},
};
</script>
四：巧妙的思路
1.将进度值提到外面，在data中通过e和100 - e，巧妙实现进度条效果。
2.把另一个不需要显示的柱条颜色设为透明transparent，就完美的实现我们的圆形进度条了。
var e = 80;
data: [
{
value: e,
name: "",
itemStyle: {
color: "#6790D8",
},
},
{
value: 100 - e,
name: "",
itemStyle: {
color: "transparent",
},
},
],
备注：title的x和y属性没有在现在的echarts官方文档中找到，不过不影响使用，有找到的同学可以call我。