cxyy-web/src/views/brain/thr/echarts6.vue

<template>
  <div ref="echarts6" class="echarts6"></div>
</template>
<style scoped lang="scss">
.echarts6 {
  height: 18vh;
  width: 100%;
}
</style>
<script setup>
import * as echarts from 'echarts'
const echarts6 = ref()
onMounted(() => {
  echarts6View()
})
function echarts6View() {
  const myChart6 = echarts.init(echarts6.value)
  const option6 = {
    tooltip: {
      // 鼠标悬浮提示数据
      trigger: 'axis',
      backgroundColor: 'rgba(32, 33, 36,.7)',
      borderColor: 'rgba(32, 33, 36,0.20)',
      borderWidth: 15,
      textStyle: {
        // 文字提示样式
        color: '#fff',
        fontSize: '12'
      },
      axisPointer: {
        // 坐标轴虚线
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },

    // },
    grid: {
      // 控制图表的位置
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      axisLabel: {
        // X轴线 标签修改
        textStyle: {
          color: 'white', //坐标值得具体的颜色
          fontSize: '10'
        }
      },
      data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {
      axisLabel: {
        // y轴线 标签修改
        textStyle: {
          color: 'white' //坐标值得具体的颜色
        }
      }
    },
    series: [
      {
        data: [2549, 12421, 2637, 3146, 15189, 9562],
        type: 'bar',
        barWidth: '48%', //调整柱状图宽度
        itemStyle: {
          normal: {
            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
            borderRadius: [12, 12, 0, 0],
            /*--------设置柱形图渐变色 -------------*/
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0,244,255,1)'
              },
              {
                offset: 1,
                color: 'rgba(0,77,167,1)'
              }
            ])
          }
        }
      }
    ]
  }
  myChart6.setOption(option6)
  window.addEventListener('resize', function () {
    myChart6.resize()
  })
}
</script>