echart水球样式

最新推荐文章于 2024-04-26 16:25:45 发布

小小1992

最新推荐文章于 2024-04-26 16:25:45 发布

阅读量226

点赞数

文章标签： echarts 前端

本文链接：https://blog.csdn.net/u014645827/article/details/131844454

版权

<html>
<head>
<meta charset="utf-8">
<script src='./js/echarts.min.js'></script>
<script src='./js/echarts-liquidfill.min.js'></script>
</head>
<body>
<style>

</style>
<div id='main' style="width: 200px;height: 200px;">


</div>
<script>
initChart();
function initChart(){
let myLiuqiud = document.getElementById("main");
               var myChart = echarts.init(myLiuqiud);
var value =78;
let option = {

title: {
text: value + "%",
textStyle: {
fontSize: 24,
fontFamily: "Microsoft Yahei",
fontWeight: "600",
color: "#fff",
                   textShadowColor:'#000',
                   textShadowBlur: 2,
                   textShadowOffsetX: 2,
                   textShadowOffsetY: 2.5,
},
x: "center",
y: "50%",
},
               textStyle: {
                   shadowColor: 'rgba(0, 0, 0, 0)',
               },
series: [

{
                       textStyle: {
                               textShadowColor:"rgba(183, 63, 63, 1)",
                                   textShadowBlur: 2,
                                   textShadowOffsetX: 2,
                                   textShadowOffsetY: 2.5,
                               fontSize: 14,
                               lineHeight:35,
                               color:"#939393",


                       },
                       // 图形样式
                   itemStyle: {
                       opacity: 1, // 波浪的透明度
                       shadowBlur: 0 ,// 波浪的阴影范围设置为0不会出现底色为灰色的情况
                       shadowColor: 'rgba(0, 0, 0, 0)',

                   },
type: "liquidFill", //配置echarts图类型
radius: "60%",
center: ["50%", "50%"],
// shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...）默认为圆形
data: [0.78], //设置波浪的值
waveAnimation:false, //静止的波浪
backgroundStyle: {
borderWidth: 11,
color: "#f4f4f4",//水球图内部背景色
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth:4,
borderColor: "#f1f1f1",
},
},
// color: [ //波浪颜色
// {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#178bff", //下
// }
// ],
// globalCoord: false,
// },{
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#188bff", //下
// }
// ],
// globalCoord: false,
// }
// ],
                   color: [ //波浪颜色
                   {
                   type: "linear",
                   x: 0,
                   y: 0,
                   x2: 1,
                   y2: 0,
                   colorStops: [
                   {
                   offset: 1,
                   color: "#1188ff", //下
                   },
                   {
                   offset: 0,
                   color: "#81c1ff",
                   },
                   ],
                   globalCoord: false,
                   },

                   ],

label: {
                       normal: {
                           textShadow:' 3px 3px 3px #000',
// insideColor: 'transparent', // 避免文字显示为白色
                           formatter: '出勤率\n',
                           textStyle: {

                               fontSize: 14,
                               lineHeight:35,
                               color:"#939393",

                           }
                       }
                   }
},

],
};
option && myChart.setOption(option);
}

</script>
</body>
</html>

小小1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echart水球样式

/ shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...）默认为圆形。// insideColor: 'transparent', // 避免文字显示为白色。color: "#1188ff", //下。// color: "#178bff", //下。// color: "#188bff", //下。// color: [ //波浪颜色。
复制链接

扫一扫