<template>
  <div>
    <div ref="echarts2" class="echarts2" style="height: 120px; width: 100%"></div>
  </div>
</template>
<style scoped></style>
<script setup>
import * as echarts from 'echarts'
const echarts2 = ref()
onMounted(() => {
  drawEcharts2()
})
function drawEcharts2() {
  var myChart5 = echarts.init(echarts2.value)
  var option5 = {
    //  backgroundColor: '#00265f',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['字段名称1', '字段名称2'],
      top: '5%',
      textStyle: {
        color: '#fff',
        fontSize: '12'
      }

      //itemGap: 35
    },
    grid: {
      left: '0%',
      top: '40px',
      right: '0%',
      bottom: '0',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7'],
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1)',
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          //  splitNumber: 2,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          //formatter: '{value} %'
          show: true,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1	)',
            width: 1,
            type: 'solid'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '字段名称1',
        type: 'line',
        smooth: true,
        data: [5, 2, 6, 4, 5, 12, 20],
        barWidth: '15',
        // barGap: 1,
        itemStyle: {
          normal: {
            color: '#62c98d',
            opacity: 1,
            barBorderRadius: 5
          }
        }
      },
      {
        name: '字段名称2',
        type: 'line',
        smooth: true,
        data: [7, 11, 8, 13, 10, 13, 10],

        itemStyle: {
          normal: {
            color: '#ffc000',
            opacity: 1,

            barBorderRadius: 5
          }
        }
      }
    ]
  }
  myChart5.setOption(option5)
}
</script>
