如何用echarts写一个简单的环形图呢[新手必看]
先看一下代码效果哦!!
我这个是在vue项目中写echarts 所以我会提前用依赖下载echarts 然后import引入 进行使用
实现效果该怎么样呢 来看代码
html
<div id="usage-right"></div>
css
#usage-right {
width: 25%;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 3px -1px #ccc,
//底部阴影
2px 0 3px -1px #ccc; //右边阴影;
}
先要在js中声明
let bgColor = "#fff";
let title = "总量";
let color = ["#24A4A4", "#607181", "#60B2FF", "#FFAE58"];
let echartData = [
{
name: "A类",
value: "25",
},
{
name: "B类",
value: "15",
},
{
name: "C类",
value: "35",
},
{
name: "D类",
value: "25",
},
];
写入method方法:
usageRight(id) {
this.usagerightone = echarts.init(document.getElementById(id));
this.usagerightone.setOption({
backgroundColor: bgColor,
color: color,
title: [
{
text: formatNumber(total) + "%",
top: "center",
left: "center",
},
{
text: "CPU使用情况",
left: "10",
top: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
textStyle: {
color: "#607181",
fontWeight: "bolder",
fontFamily: "思源黑体",
fontSize: 20,
},
},
],
series: [
{
type: "pie",
radius: ["45%", "60%"],
center: ["50%", "50%"],
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderColor: bgColor,
borderWidth: 2,
},
},
labelLine: {
normal: {
length: 20,
length2: 50,
lineStyle: {
color: "#607181",
},
},
},
label: {
normal: {
formatter: (params) => {
return formatNumber(params.value) + "%";
},
// padding: [0 , -10, 0, -10],
rich: {
name: {
fontSize: 14,
padding: [0, 10, 0, 4],
},
},
},
},
},
],
});
},
一定要在data里面写一个数据usagerightone为空
usagerightone:""
一定要在mounted里面调用哦
this.usageRight("usage-right");