echarts 液位柱子示例

import * as echarts from 'echarts'
type EChartsOption = echarts.EChartsOption

var maxData = 100
export default ({ gasVolume }: any = {}): EChartsOption => {
  return {
    xAxis: {
      show: false,
      data: [0],
    },
    yAxis: {
      max: maxData,
      type: 'value',
      show: false,
    },
    grid: {
      top: '15',
      bottom: '-5',
      right: '0',
      left: '-30',
      containLabel: true,
    },
    series: [
      {
        // 柱子
        type: 'bar',
        barWidth: 60,
        showBackground: true,
        // label: {
        //   show: true,
        //   formatter: '{c}%',
        //   color: 'white',
        //   align: 'center',
        //   verticalAlign: 'middle',
        // },
        backgroundStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgb(46 178 255)' },
            { offset: 1, color: 'white' },
          ]),
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#0095ff' },
            { offset: 0.5, color: '#04e6fd' },
            { offset: 1, color: '#0095ff' },
          ]),
        },
        data: [gasVolume.value],
        z: 1,
      },
      {
        type: 'scatter',
        data: [gasVolume.value > 100 ? 100 : gasVolume.value],
        symbolSize: [60, 16],
        label: {
          show: true,
          color: 'white',
          formatter: `${gasVolume.value}%`,
          offset: [0, 1]
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#0095ff' },
            { offset: 1, color: '#48fcff' },
          ]),
        },
        cursor: 'auto',
        emphasis: {
          disabled: true,
        },
        z: 11
      },
      {
        // 顶盖
        type: 'pictorialBar',
        animationDuration: 0,
        barWidth: '60',
        symbolSize: ['100%', 16],
        symbolRepeat: false,
        symbolMargin: '0',
        symbolPosition: 'end',
        symbolOffset: [0, -8],
        symbolBoundingData: maxData,
        legendHoverLink: false,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#0059a5' },
            { offset: 1, color: '#0095ff' },
          ]),
        },
        cursor: 'auto',
        emphasis: {
          disabled: true,
        },
        data: [0],
        z: 10,
      },
      {
        // 底座
        type: 'pictorialBar',
        animationDuration: 0,
        barWidth: '60',
        symbolRepeat: false,
        symbolMargin: '0',
        symbolPosition: 'start',
        symbolOffset: [0, 8],
        symbolSize: ['100%', 16],
        symbolBoundingData: maxData,
        legendHoverLink: false,
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#0095ff' },
            { offset: 1, color: '#48fcff' },
          ]),
        },
        data: [0],
        z: 10,
      },
    ],
  }
}

项目开发示例记录备用~！

预设效果：二维平面3D视觉效果液位柱

参数相关：maxData设置最大高度为100；gasVolume液位显示对应的百分比值；

echarts相关：使用的bar柱状为打底效果，主要显示长方形的宽高及液位高背景色，底部及顶盖椭圆是使用的pictorialBar设置symbolOffset偏移值做固定显示，因symbolPosition设置不会受页面自适应影响变形，因scatter散点图与bar柱状相同使用x,y值定位所以液位高度的椭圆面会位置同步并不受页面自适应影响变形；

注：为什么不适用pictorialBar做液位面的绘制，因为pictorialBar定位靠偏移量计算需通过计算定位与bar液位y值相同位置，但受自适应页面影响会导致液面椭圆移位；效果Y值最大100，但是不能影响真实百分比数值显示

美化：可增加自定义颜色从底部绿色到顶部红色渐变过程，自行代码实现