Echarts仪表盘油耗油量图表

最新推荐文章于 2025-03-06 12:06:57 发布

weixin_47014532

最新推荐文章于 2025-03-06 12:06:57 发布

阅读量185

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_47014532/article/details/134363161

版权

Echarts油耗图表)代码如下在这里插入代码片
在这里插入图片描述

在这里插入代码片
<template>
  <div :id="props.id" class="chart-1" v-if="id=='LoadRate'"></div>
  <div :id="props.id" class="chart-1" v-if="id=='RuntimeTa'"></div>
  <div :id="props.id" class="chart-1" v-if="id=='Oilquantity'"></div>
  <span class="font left">E</span>
  <span class="font right">F</span>
  <span v-if="show" class=" img  "></span>
  <span v-else class=" oli3 "></span>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const props = defineProps<{id:string,color:string,data:any}>()
let myChart: echarts.ECharts;
let show = ref(true)

/* 仪盘表是有长度的，需要有个最大刻度，根据id来进行判断啦，先不做颜色变化 */
let dataMax = ref(0.5);
let data = ref(0.5);

if(dataMax.value<0.25){
  show.value = true
}else{
  show.value = false;
}
let color =ref('#72b523')
// console.log('进度条',props.data)
if(props.id == 'LoadRate'){
  dataMax.value = 1;
  if(props.data>1){
    color.value = 'red'
  }
}else if(props.id=='Oilquantity'){
  console.log(props.data)
  dataMax.value = 100;
}else{
  dataMax.value = 24;
}
const initPie = () => {
  if (!myChart) {
    myChart = echarts.init(document.getElementById(props.id) as HTMLElement);

  }
  const option = {

    series: [
    {
 
      axisLine: {//仪表盘轴线相关配置。
        lineStyle: {
          width: 4,
          color: [
            [0.25, '#f46528'],
            [1, '#1afa29']
          ]
        }
      },
      splitLine: {//分隔线样式。
 
        distance: -4,
        length: 14,
        lineStyle: {
          color: '#000',
          width: 6
        }
      },
      axisTick: {//刻度样式
        splitNumber: 3,
        distance: -4,
        length: 14,
        lineStyle: {
          color: '#000',
          width: 2
        }
      },
      axisLabel: {  //刻度标签。
        distance: 10,
        fontSize: 10,
        fontWeight: 800,
        fontFamily: 'Arial',
        color: '#000',
        formatter: function (value:any) {
          if (value === 0.5) {
            return '1/2';
          }
         else if (value === 0.25) {
            return '1/4';
          }
         else if (value === 0.75) {
            return '3/4';
          }
          else
          return   '';
        }
      },
      progress: {  //展示当前进度
        show: true,
        width: 12,
        itemStyle: {
          color: 'rgba(0, 0, 0, 0.15)',

        
        }
      },
      anchor: {  //表盘中指针的固定点。
        show: true,
        
        offsetCenter: ['0%', '2%'],
        size: 14,

    itemStyle: {
          color: '#565455',
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 8,
          shadowOffsetX: 2,
          shadowOffsetY: 4
        }
 
     
      },
      pointer: {   //是否显示指针
        show: true,
        length: "90%",
        width: 4,
        itemStyle: {
            color: "auto",
 
          },
      },
  
      detail: {   //仪表盘详情，用于显示数据。
        show:false,
       
      },
      data: [
        {
          value: data.value,
          name: ''
        }
      ]
    },
  
    ],
  };
  myChart.setOption(option);
};
onMounted(()=>{
    initPie()
})
</script>
<style lang="less" scoped>
.chart-1 {
  width: 281px;
  height: 222px;

  margin-left: 25px;
  margin-top:30px;
  position: absolute;
  left: -66px;
  top: -38px;
  // cursor: pointer;
}
#LoadRate{
  cursor: pointer;
}
.font{
  font-size: 16px;
  font-weight: 900;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  position: absolute;
  // left:  16px;
  top: 108px;
  
}
.left{
  left:  16px;
  // top: 108px;
  color:#d85826;
}
.right{
  right:26px;
  color:#000;
}
.img{

  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 116px;
  left:  88px;
  background-color: red;
  background: url("/static/icon/oli2.png") no-repeat;
  background-position: center center;
  background-size: contain;
}
.oli2{

}
.oli3{
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 116px;
  left:  88px;
  background-color: red;
  background: url("/static/icon/oli3.png") no-repeat;
  background-position: center center;
  background-size: contain;
}
</style>