echarts水球波浪图的实现

最新推荐文章于 2024-05-30 09:55:08 发布

小栗桔

最新推荐文章于 2024-05-30 09:55:08 发布

阅读量885

点赞数 2

分类专栏： echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_43140590/article/details/125797427

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts水球图

用的是echarts-liquidfill
我的版本是这样

   "echarts-liquidfill": "2.0.6"

水滴图

// An highlighted block
 var chartDom = document.getElementById('circularScore');
    if (chartDom) {
      // console.log(chartDom, 'chartDom');
      var value = (score / 100).toFixed(4);//我个人需要的值
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            backgroundStyle: {
              undefined,
              color: '#616161', // 水球未到的背景颜色
              opacity: 0.9,
            },
            type: 'liquidFill',
            radius: '80%',
            // z: 1,
            center: ['50%', '50%'],
            amplitude: 20,
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#cdae84',
                  },
                  {
                    offset: 1,
                    color: '#d6c9b6',
                  },
                ],
              },
            ],
            data: [
              {
                value: value,
                direction: 'left',
                label: {
                  normal: {
                    textStyle: {
                      color: '#cfcbcb',
                      fontSize: 50
                    }
                  }
                }
              },
            ],
            label: {
              formatter: function (params) {
                return (params.value * 100 ).toFixed(2);//水球上面的数字
              },
                fill: '#fff',
            },
            outline: {
              // 是否显示外圈
              show: false,
            },
          },
        ],
      };
      option && myChart.setOption(option);
    }