echart - 圆角环形图 -模板

最新推荐文章于 2024-03-24 15:57:41 发布

VIP文章抓佬

最新推荐文章于 2024-03-24 15:57:41 发布

阅读量1.7k

点赞数 2

文章标签： echarts

本文链接：https://blog.csdn.net/zhualao/article/details/120217966

版权

一、最近遇到圆角环形图的需求。搞了半天，才找到一个合适的模板，在这里就分享给大家，希望对有需求的小伙伴有所帮助。废话不多说，先贴效果图，然后再贴源码。
在这里插入图片描述
tip: 大家记得要引入一下echart.js的文件啊，这样才可以显示出来。路径记得找的要对哦。
下面代码中的min.js就是echart.js。可以自行到官网下载
这个echart.js的版本需要在4.5版本往上（包含4.5的）才可以正常显示圆角环形图哦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="dayFluxDetail" id="mainCharts" style=" width: 100%; height: 500px;"></div>
</body>
<script src="./min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('mainCharts'));
var getnhname = ['教师','学生'];
var getnhvalue = [4,95];
var getflname = ['用餐支出', '用水支出', '用电支出'];
var getflvalue = [90,3,7];

// 圆环值
var data1 = [];
for(var i = 0;i<getflname.length;i++){
	data1.push({name:getflname[i],value:getflvalue[i]})
}

// 环内
var data2 = [];
// for(var i = 0;i<getnhname.length;i++){
// 	data2.push({name:getnhname[i],value:getnhvalue[i]})
// }

// 圆环颜色
var color = [{
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,

最低0.47元/天解锁文章

抓佬

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
echart - 圆角环形图 -模板

一、最近遇到圆角环形图的需求。搞了半天，才找到一个合适的模板，在这里就分享给大家，希望对有需求的小伙伴有所帮助。废话不多说，先贴效果图，然后再贴源码。tip: 大家记得要引入一下echart.js的文件啊，这样才可以显示出来。路径记得找的要对哦。下面min.js就是echart.js。可以自行到官网下载啊。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫