Echarts-水球图笔记

Echarts-水球图笔记

Echarts一个基于 JavaScript 的开源可视化图表库

官方文档： https://github.com/ecomfe/echarts-liquidfill

第一步：安装依赖

npm install echarts
npm install echarts-liquidfill

版本选择

"echarts": "^5.3.0",
"echarts-liquidfill": "^3.1.0",

第二步：引入echarts 和 echarts-liquidfill

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

第三步：初始化echarts并配置echart;

const myEchart = echarts.init(document.getElementById('my-echart'));
const option = {
   series: {
      type: "liquidFill",
      data: [0.5]
   }
};
myEchart.setOption(option);

默认配置

option = {
	series: [
        {
          type: "liquidFill",
          data: [0.7], // 可以多个波浪，数大在前，数小在后，避免遮挡（不透明情况下)。

          // data中的元素也可以使用一个对象，单独设置某项样式 {
          //   value: 0.3,
          //   direction: 'left',  // 将单个波浪的移动方向设置为默认的反方向
          //   itemStyle: {
          //       color: 'red',
          //       opacity: 0.6
          //   },
          //   emphasis: {
          //       itemStyle: {
          //           opacity: 0.9
          //       }
          //   }
          // }

          color: ["#294D99", "#156ACF", "#1598ED", "#45BDFF"],
          center: ["50%", "50%"], // 球心到左/上边界的距离 百分数 或者 px（其他单位也按px计算）
          radius: "80%", // 调节球的大小，百分数或者px
          amplitude: "7%", // 波浪幅度，振幅大小， 0为平面
          waveLength: "80%",
          phase: "auto",
          period: "auto",
          direction: "right",
          shape: "circle", // 形状设置 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          // 1.              // 形状设置 '圆形', '正方形', '带圆角的正方形', '正三角形', '菱形', '定位形状/钉', '箭头'
          // 2. container 时填充整个框框
          // 3. an SVG path starting with 'path://'.

          waveAnimation: true, // 开启或关闭波浪动画
          animationEasing: "linear",
          animationEasingUpdate: "linear",
          animationDuration: 1000, // 第一次波浪升起来时的动画时长； 设为0后直接切换
          animationDurationUpdate: 2000, // data数据变动时波浪升起或下降的动画时长，数据变动后需调用mychart.setOption(option)

          outline: {
            // 水球外侧默认有一个边框
            show: true, // 默认显示，false不显示
            borderDistance: 8,
            itemStyle: {
              color: "none",
              borderColor: "#294D99",
              borderWidth: 8,
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.25)",
            },
          },

          backgroundStyle: {
            color: "#E3F7FF", // 水球背景色
            borderWidth: 3, // 水球内部圆形的边框宽度， 默认是没有的
            borderColor: "pink", // 设置了边框颜色才能看见边框；
          },

          itemStyle: {
            opacity: 0.95, // 波浪颜色透明度
            shadowBlur: 50,  // 波浪边缘的阴影
            shadowColor: "rgba(0, 0, 0, 0.4)",
          },

          label: {
            formatter: function () {
              // 可以自定义中心的文字 \n换行
              return "Echart \n\n\n Liquid Fill";
              // formatter: '{a}\n{b}\nValue: {c}',
              // a 代表 series.name , b 代表 series.data中第一个元素定义的name, c 代表 series.data中第一个元素定义的value;
              // b/c  data: [{name: 'First Data', value: 0.6}, 0.5, 0.4, 0.3],
            },
            show: true,
            color: "#294D99",
            insideColor: "#fff",
            fontSize: 50,
            fontWeight: "bold",

            align: "center",
            baseline: "middle",
            position: "inside",
          },

          emphasis: {
            // 鼠标悬停效果设置位置
            itemStyle: {
              opacity: 0.8, // 波浪填充色的hover style 的透明度， 鼠标放在波浪上的透明度
              color: "#f00",
            },
          },
        },
      ],
      tooltip: {
        show: true  // 鼠标放上显示数据
      }
};