table of Contents
One: Effect picture
Two: Environment
Using the framework (vue), you need to install echarts before running the following code.
-
Command to install ECharts through npm
npm install echarts --save -
ECharts incorporated
directly in the project codevar echarts = require('echarts');obtained ECharts.
Three: on the code
<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>
Four: clever ideas
1. Bring the progress value to the outside, datapass eand sum in the middle 100 - e, cleverly realize the effect of the progress bar.
2. Set the color of another bar that does not need to be displayed to be transparent transparent, and our circular progress bar is perfectly realized.
var e = 80;
data: [
{
value: e,
name: "",
itemStyle: {
color: "#6790D8",
},
},
{
value: 100 - e,
name: "",
itemStyle: {
color: "transparent",
},
},
],
Note: titleThe xand yattributes are not found in the current echarts official documents, but it does not affect the use. Students who find it can call me.