2023-02-08 水滴图学习笔记

安装

npm install echarts
npm install echarts-liquidfill

import

import * as echarts from 'echarts';
import 'echarts-liquidfill'

示例demo

const chart = echarts.init(document.getElementById("app"));
chart.setOption({
  series: [
    {
      type: "liquidFill",
      outline: {
        show: false //隐藏outline
      },
      data: [
        {
          value: 0.65,
          itemStyle: {
            color: "#FFD3EB"
          }
        },
        {
          value: 0.6,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#E346FF" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#E1277E" // 100% 处的颜色
                }
              ]
            }
          }
        }
      ],
      center: ["50%", "50%"],
      amplitude: "6%",
      itemStyle: {
        opacity: 0.95, //液体填充部分透明度
        shadowColor: "rgba(0,0,0,0)" //液体填充部分阴影颜色
      },
      label: {
        normal: {
          textStyle: {
            fontSize: 16,
            color: "#FFD3EB"
          }
        }
      },
      radius: "75%",
      backgroundStyle: {
        borderColor: "#FFD3EB",
        borderWidth: 1,
        shadowBlur: 4,
        shadowColor: "#FFD3EB",
        color: "#FFFFFF" //填充背景
      }
    }
  ]
});

demo.png

问题简记

• 问题描述

需求要求 填充背景是白色，但是 设置“backgroundStyle.color ” 为白色的时候，还是会有点灰色，无法完全变白色：如下图

demo1.png

• 解决方案

改变一下思路，其实不是背景填充的原因，灰色是由于液体填充部分的阴影色导致的，所以改变液体填充部分的阴影色值就可以了。

   itemStyle: {
        opacity: 0.95, //液体填充部分透明度
        shadowColor: "rgba(0,0,0,0)" //液体填充部分阴影颜色
      },

参考文档

echart水滴图api：https://github.com/ecomfe/echarts-liquidfill#api