admin/src/views/home/echarts/echarts4.vue

<template>
  <div ref="echarts4" class="echarts4"></div>
</template>
<style scoped lang="scss">
.echarts4 {
  height: 100%;
  width: 100%;
}
</style>
<script setup>
import * as echarts from 'echarts'
const echarts4 = ref()
onMounted(() => {
  echarts4View()
})
function echarts4View() {
  const myChart4 = echarts.init(echarts4.value)
  const option4 = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '5%',
      right: '0%',
      bottom: '10%',
      top: '5%'
    },
    legend: {
      orient: 'horizontal',
      x: '20px',
      y: '10px',
      itemGap: 50, //图例之间间距
      itemWidth: 12, //图例宽
      itemHeight: 12, //图例高
      icon: 'circle',
      textStyle: {
        fontSize: 14 //更改坐标轴文字大小
      }
    },
    xAxis: {
      type: 'category',
      axisTick: {
        //x轴刻度尺
        show: false,
        alignWithLabel: true
      },
      axisLine: {
        //x轴线条颜色
        show: true,
        lineStyle: {
          color: '#dadada',
          width: 0.5
        }
      },
      axisLabel: {
        //x轴文字倾斜
        show: true,
        textStyle: {
          color: '#333', //更改坐标轴文字颜色
          fontSize: 14 //更改坐标轴文字大小
        }
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value',
      name: '',
      nameTextStyle: {
        padding: [0, 30, 5, 0], // y轴name位置
        color: '#333', //更改坐标轴文字颜色
        fontSize: 14 //更改坐标轴文字大小
      },
      splitLine: {
        show: true, //关闭网格线
        lineStyle: {
          color: '#dadada',
          width: 0.5
        }
      },
      axisLine: {
        //y轴线条颜色
        show: false
      },
      axisTick: {
        //x轴刻度
        show: false
      },
      axisLabel: {
        //y轴文字倾斜
        textStyle: {
          color: '#333', //更改坐标轴文字颜色
          fontSize: 14 //更改坐标轴文字大小
        }
      }
    },
    series: [
      {
        type: 'line',
        stack: 'Total',
        symbolSize: 8, //设定实心点的大小
        smooth: true, //面积图改成弧形状
        lineStyle: {
          normal: {
            color: '#168eff', //外边线颜色
            width: 3, //外边线宽度
            shadowColor: '#168eff', //线阴影颜色
            shadowOffsetY: 10, //阴影大小
            shadowBlur: 15
          }
        },
        itemStyle: {
          normal: {
            //节点颜色
            color: '#168eff'
          }
        },
        showSymbol: true, //去除面积图节点圆
        data: [148, 108, 96, 95, 84, 69, 123, 160, 190, 123, 251, 220]
      }
    ]
  }
  myChart4.setOption(option4)
  window.addEventListener('resize', function () {
    myChart4.resize()
  })
}
</script>