Tabla de contenido
Uno: imagen de efecto
Dos: Medio Ambiente
Con el marco (vue), debe instalar echarts antes de ejecutar el siguiente código.
-
Comando para instalar ECharts a través de npm
npm install echarts --save -
ECharts incorporado
directamente en el código del proyectovar echarts = require('echarts');obtenido ECharts.
Tres: en el código
<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>
Cuatro: ideas inteligentes
1. Lleve el valor de progreso al exterior, datapase ey sume en el medio 100 - e, realice inteligentemente el efecto de la barra de progreso.
2. Establezca el color de otra barra que no necesita mostrarse para que sea transparente transparent, y nuestra barra de progreso circular se realiza perfectamente.
var e = 80;
data: [
{
value: e,
name: "",
itemStyle: {
color: "#6790D8",
},
},
{
value: 100 - e,
name: "",
itemStyle: {
color: "transparent",
},
},
],
Observaciones: titleLos atributos xy yno se encuentran en los documentos oficiales actuales de echarts, pero no afecta el uso, los estudiantes que lo encuentren pueden llamarme.