uniapp中echart实例

1,自定义仪表盘

797_1706772047

index.vue

javascript 复制代码
import { useGaugeStore } from "@/stores/utils";
const { currentValueEndAngle, currentSplitNumber } = storeToRefs(
  useGaugeStore()
);
const gaugeStore = useGaugeStore();

const wenduGauge = ref<chartBaseOptionsType>({
  width: "400rpx",
  height: "400rpx",
  chartsId: "test",
  setOptions: {
    graphic: [
      
      {
        type: "text",
        left: 20,
        top: 184,
        scaleX: 1.4,
        scaleY: 1.4,
        style: {
          text: gaugeStore.minHeat + "°C",
          fill: "#007C84",
        },
      },
      {
        type: "text",
        left: 160,
        top: 184,
        scaleX: 1.4,
        scaleY: 1.4,
        style: {
          text: gaugeStore.maxHeat + "°C",
          fill: "#007C84",
        },
      },
    ],
    series: [],
  },
});


const setGaugeOption = () => {
  const dataArr = [
    {
      type: "gauge",
      radius: "90%",
      splitNumber: 1,
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          opacity: 1,
          color: [[1, "#007C84"]],
        },
      },
      startAngle: gaugeStore.startAngle,
      endAngle: gaugeStore.endAngle,
      title: { show: false },
      detail: { show: false },
      splitLine: { show: false },
      axisTick: {
        length: 10,
        splitNumber: 60,
        lineStyle: {
          color: "rgba(0, 118, 135, 0.2)",
          width: 2,
        },
      },
      axisLabel: { show: false },
      pointer: { show: false },
      itemStyle: {},
    },
    {
      type: "gauge",
      radius: "90%",
      splitNumber: currentSplitNumber.value ? 1 : 0,
      axisLine: {
        show: false,
        lineStyle: {
          width: 0,
          opacity: 0,
        },
      },
      startAngle: gaugeStore.startAngle,
      endAngle: gaugeStore.getValueEndAngle(),
      title: { show: false },
      detail: {
        show: true,
        offsetCenter: [0, 0],
        color: "#00495F",
        fontSize: 34,
      },
      splitLine: { show: false },
      axisTick: {
        length: 11,
        splitNumber: currentSplitNumber.value,
        lineStyle: {
          color: "#23BAC4",
          width: 2,
        },
      },
      axisLabel: { show: false },
      pointer: { show: false },
      itemStyle: {},

      data: [{ value: popUpValue.value.temperature }],
    },
  ];
  wenduGauge.value.setOptions.series = dataArr;
};

const handlerHeat = (type: string) => {
  popUpValue.value.temperature =
    type === "jia"
      ? popUpValue.value.temperature + 1
      : popUpValue.value.temperature - 1;

  open();
};
const open = () => {
  gaugeStore.setCurrentValue(popUpValue.value.temperature);
  setGaugeOption();
};

utils.ts文件

javascript 复制代码
import { ref } from "vue";
import { defineStore } from "pinia";
export const useGaugeStore = defineStore("gauge", () => {
  const splitCount = 60; //刻度总数

  const startAngle = 225; // 开始角度

  const endAngle = -45; // 结束角度

  const totalAngle = 270; //总的角度

  const currentValueEndAngle = ref(0); //值现在的结束角度

  const currentSplitNumber = ref(0); //当前刻度数

  const maxHeat = 31;

  const minHeat = 16;

  const heatRange = maxHeat - minHeat;

  function setCurrentValue(currentHeat: number) {
    const a = totalAngle / splitCount;

    const b = (splitCount / heatRange) * (currentHeat - minHeat);
    console.log(a, b);

    currentSplitNumber.value = b;

    currentValueEndAngle.value = a * b;
    // 144 32
  }

  function getValueEndAngle() {
    return startAngle - currentValueEndAngle.value;
  }
  
  return {
    startAngle,
    endAngle,
    maxHeat,
    minHeat,
    currentValueEndAngle,
    currentSplitNumber,
    setCurrentValue,
    getValueEndAngle,
  };
});
相关推荐
mCell16 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip16 小时前
Node.js 子进程:child_process
前端·javascript
excel19 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel20 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript