echarts图表集

let numdata=["I级",'II级','III级','IV级','V级','劣V级']
let pricedata=40
option = {
  backgroundColor: '#0f375f',
  title: {
    show: false,
    text: '',
    left: 'center',
    top: '30%',
    textStyle: {
      color: '#00D5FF',
      fontSize: 16,
    },
  },
  tooltip: {
    show: false
  },
  grid: {
    // show: true,
    top: '45%',
    left: 20,
    right: 20,
    height: 20,
  },
  xAxis: {
    // show: false,
    type: 'value',
    position: 'top',
    offset: '-50',//X 轴相对于默认位置的偏移
    splitNumber:5,
    // 设置x轴标签格式

    axisLabel: {

      
      // show: false,
      // formatter: '{value}级',
      // formatter: numdata+' 级',
       formatter: function (value, index) {
                // 根据需要自定义标签内容
                return numdata[index]; // 将所有字母转换为大写
            },
      lineStyle: {
        type: 'solid',
        color: '#CCCCCC',//左边线的颜色
        width: ''//坐标线的宽度
      },
      textStyle: {
        color: '#ccc',//坐标值得具体的颜色
        
      },
      //   margin: 12,//刻度标签与轴线之间的距离。
    },
    axisTick: {
      // show: true,
      length: 7,// 刻度线长度
      lineStyle: {
        type: 'solid',
        color: '#CCCCCC',//左边线的颜色
        width: '1'//坐标线的宽度	
      }
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: false,
    }
  },
  yAxis: {
    type: 'category',
    show: false,
  },
  color: ["rgb(255, 255, 255,0.8", "#FF2828", "#00D5FF"], //配置颜色
  series: [
    {
      name: '达成进度',
      type: 'bar',
      data: [100],
      // itemStyle: {
      //     barBorderRadius: [100, 100, 100, 100],
      // },
      itemStyle: {
        barBorderRadius: [100, 100, 100, 100],
        borderRadius: [4, 4, 4, 4],
        color: {
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(3, 221, 172, 1)',
            },
            {
              offset: 1,
              color: 'rgba(224, 9, 8, 1)',
            },
          ],
        },
      },
      barWidth: 20,
      showBackground: false,
      // backgroundStyle: {
      //   color: 'rgba(180, 180, 180, 0.2)'
      // }
    },
    {
      name: '',
      type: 'line',
      symbol: 'rect',
      symbolSize: [6, 25], // 竖线宽高
      color:"rgb(255, 255, 255,0.8",
      data: [pricedata]
    },
    // {
    //   name: '预计达成',
    //   type: 'line',
    //   symbol: 'rect',
    //   symbolSize: [6, 25], // 竖线宽高
    //   data: [60]
    // },
    // {
    //   name: '总目标',// 背景
    //   type: 'bar',
    //   data: [100],
    //   barGap: "-100%",
    //   itemStyle: {
    //     barBorderRadius: [100, 100, 100, 100],
    //     color: 'rgba(180, 180, 180, 0.2)'
    //   },
    //   barWidth: 20,
    // }
  ]
};