echarts 仪表盘正负效果

最新推荐文章于 2024-05-07 17:06:30 发布

hejiqiang666

最新推荐文章于 2024-05-07 17:06:30 发布

阅读量520

点赞数

文章标签： echarts flask 前端

本文链接：https://blog.csdn.net/hejiqiang666/article/details/133385057

版权

本文展示了如何在网页中使用ECharts库创建两个交互式的Gauge图表，一个顺时针旋转，一个逆时针，通过JavaScript控制显示状态并实时更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import * as echarts from 'echarts';

let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);

let graw = 30;//正数顺时针，负数逆时针。
let flag = graw > 0;
let data = [Math.abs(graw)];
let option = {
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -135,
      min: 0,
      max: 100,
      clockwise: false,
      progress: {
        show: true,
        width: 38
      },
      itemStyle: {
        color: 'red'
      },
      axisLine: {
        lineStyle: {
          width: 38,
          color: [[1, '#cdcdcd']]
        }
      },
      pointer: {
        show: !flag
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      anchor: {
        show: !flag,
        showAbove: true,
        size: 30,
        itemStyle: {
          borde