柱状图

let xData = ['温度', '空气', '视觉'];
let yData = [27, 21, 21];
let barWidth = 30;
option = {
  grid: {
    top: '18%',
    left: '5%',
    bottom: '3%',
    right: '5%',
    containLabel: true,
  },
  tooltip: {
    show: true,
  },
  legend: {
    
    top: '1%',
    textStyle: {
      color: "#fff",
      fontSize: 12
    },
    itemWidth: 15,
    itemHeight: 15,
    selectedMode: false,
  },
  animation: false,
  xAxis: [{
    type: 'category',
    data: xData,
    axisTick: {
      show:false,
      alignWithLabel: true,
    },
    nameTextStyle: {
      color: '#82b0ec',
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#82b0ec',
      },
    },
    axisLabel: {
      show:true,
      margin:20,
      textStyle: {
        color: '#fff',
      },
    },
  }, ],
  yAxis: [{
    show: true,
    min:0,
    max:100,
    // name:'单位：篇',
    nameTextStyle: {
      fontSize: 12,
      fontFamily: 'PingFang SC',
      color: '#fff'
    },
    type: 'value',
    axisLabel: {
      show:false,
      textStyle: {
        color: '#fff',
      },
    },
    splitLine: {
      show:false,
      lineStyle: {
        color: '#324979',
        type: 'dashed',
      }
    },
    axisLine: {
      show: false,
    },
  }, ],
  series: [{
      name: '',
      type: 'pictorialBar',
      symbolSize: [barWidth, 5],
      symbolOffset: ['0', -3], // 上部椭圆
      symbolPosition: 'end',
      z: 12,
      color: '#2185f0',
      data: yData,

    },
    {
  
      type: 'pictorialBar',
      symbolSize: [barWidth, 5],
      symbolOffset: [0, 3], // 下部椭圆
      // barWidth: "20",
      z: -10,
      color: '#228fe1',
      data: yData,
    },
      {

      type: 'pictorialBar',
      symbolSize: [barWidth, 5],
      symbolOffset: [0, 0], // 下部椭圆
      // barWidth: "20",
      z: -10,
      color: '#228fe1',
      data: [100,100,100],
       symbolPosition: 'end',
    },
    {
    
      type: 'bar',
           barCateGoryGap: 0,
      barWidth: barWidth,
   showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)',
         shadowOffsetY:100,
      },
    
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [{
              offset: 0,
              color: '#228fe1',
            },
            {
              offset: 1,
              color: '#228fe1',
            },
          ]),
          opacity: 0.8,
        },
      },
      data: yData,
    },
  ],
};

雷达图

 
 let x1 = [3.34, 3.34, 3.34, 3.34]
 let x1Name = '房间当天值'
 let x2 = [6.87, 6.87, 6.87, 6.87]
 let x2Name = '楼宇当日平均值'
 option = {
  backgroundColor: '#0a1627',
  title: {
    text: '20栋103房间/20号楼宇-当日均值',
    subtext: '(2025.2.24)',
    top: 20,
    left: 'center',
    textStyle: {
      color: '#ffffff',
      fontSize: 20
    },
    subtextStyle: {
      color: '#cccccc',
      fontSize: 14
    }
  },
  grid:{
    width:100,
    height:100,
    containLabel:true,
  },
 legend:[
    {
        orient:'vertical',
        icon: 'circle', //图例形状
        top:35,
        right:40,
        itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
        itemHeight: 10, // 图例标记的图形高度。[ default: 14 ]
        itemGap: 15, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        borderColor: 'rgba(255,255,255,0.3)',
        borderWidth: 1,
        borderRadius:8,
       
        borderType:'dashed',
        padding: [12, 10, 12, 10],
        // padding: 10,
        textStyle: {
            fontSize: 10,
            color: '#FFF',
        },
    },
     {
     
        icon: 'circle', //图例形状
        top:348,
        left:180,
        itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
        itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
        itemGap: 12, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        
        borderRadius:8,
        borderType:'dashed',
        padding: 12,
        // padding: 10,
        textStyle: {
            fontSize: 12,
            color: '#FFF',
        },
         // 自定义显示内容
    formatter: function (name) {
        // 你可以这里自定义，返回你想展示的文字
        // 比如原来叫 "房间当天值"，你可以改成 "房间当天值 3.34 kWh"
        if (name === '房间当天值') {
            return x1[1];
        } else if (name === '楼宇当日平均值') {
            return x2[1];
        } else {
            return 0; // 其他保持不变
        }
    }
    },
    
    ],
  radar: {
    radius: '45%',
    splitNumber: 7,
    axisName: {
      color: '#ffffff',
      fontSize: 12,
       backgroundColor:'red',
   lineHeight:20,
       borderRadius:5,
       padding: [5,10,5,10]
    },
    shape: 'circle',
    axisNameGap:30,

    splitLine: {
      lineStyle: {
        color: '#1c3a5d'
      }
    },
     axisLabel:{
       show:true,
       fontSize:10,
        align:'center',
        formatter:(data)=>{
          return Number(data).toFixed(0)
        },
     },
    splitArea: {
      areaStyle: {
        color: ['transparent']
      }
    },
    axisLine: {
      lineStyle: {
        color: '#1c3a5d'
      }
    },
    indicator: [
      { name: '日用电量峰值 (kWh)', max: 10 },
           { name: '工作时间    \n用电量 (kWh)', max: 10 },
                 { name: '休息时间用电量 (kWh)', max: 10 },

      { name: '日总用电量 (kWh)', max: 10 },
    ]
  },
  tooltip: {
    trigger: 'item'
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: x1,
        name:x1Name,
        areaStyle: {
          opacity: 0.3
        },
        lineStyle: {
          color: '#56FEFE'
        },
        itemStyle: {
          color: '#56FEFE'
        }
         
      },
      {
        value: x2,
        name: x2Name,
        areaStyle: {
          opacity: 0.1
        },
        lineStyle: {
          color: '#FF0800'
        },
        itemStyle: {
          color: '#FF0800'
        }
      }
    ]
  }]
};

折现图 区域范围

     markArea: {
                silent: true,
                itemStyle: {
                    color: 'rgba(0,255,255,0.15)',
                    borderWidth: 0,
                    borderColor: '#f6c343'
                },
                label: {
                    show: true,
                    color: '#00ffff',
                    fontSize: 14
                },
                data: [
                   
                    [
                        {
                            xAxis: '13:30',
                            yAxis: 4,
                            label: { formatter: '空调关闭压缩机、水箱释冷', position: 'inside' }
                        },
                        { xAxis: '15:00', yAxis: 2 }
                    ],
                 
                ]
            }
            ```