echarts 仪表盘正负效果

最新推荐文章于 2024-05-02 00:29:18 发布

hejiqiang666

最新推荐文章于 2024-05-02 00:29:18 发布

阅读量243

点赞数

文章标签： echarts flask 前端

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

版权

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: {
          borderWidth: 5,
          borderColor: 'red'
        }
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      data: !flag ? data : [0]
    },
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -45,
      min: 0,
      max: 100,
      progress: {
        show: true,
        width: 38
      },
      itemStyle: {
        color: 'green'
      },
      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: {
          borderWidth: 5,
          borderColor: 'green'
        }
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      data: flag ? data : [0]
    }
  ]
};

option && myChart.setOption(option);