technique_admin/src/views/elevenHatch/path/echarts4.vue

<template>
  <div>
    <div ref="echarts4" class="echarts4"></div>
  </div>
</template>
<style scoped>
.echarts4 {
  height: 242px;
  width: 100%;
}
</style>
<script setup>
import * as echarts from 'echarts'
const echarts4 = ref()
onMounted(() => {
  drawEcharts4()
})
function drawEcharts4() {
  var myChart4 = echarts.init(echarts4.value)
  var option4 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#57617B'
        }
      }
    },
    legend: {
      data: ['销售额', '利润'],
      top: '0',
      textStyle: {
        color: '#fff'
      },
      itemGap: 20
    },
    grid: {
      left: '0',
      right: '20',
      top: '10',
      bottom: '20',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(255,255,255,.6)'
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ]
      },
      {}
    ],
    yAxis: [
      {
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(255,255,255,.6)'
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(24, 163, 64, 0.3)'
                },
                {
                  offset: 0.8,
                  color: 'rgba(24, 163, 64, 0)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: '#cdba00',
            borderColor: 'rgba(137,189,2,0.27)',
            borderWidth: 12
          }
        },
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
      },
      {
        name: '利润',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(39, 122,206, 0.3)'
                },
                {
                  offset: 0.8,
                  color: 'rgba(39, 122,206, 0)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: '#277ace',
            borderColor: 'rgba(0,136,212,0.2)',
            borderWidth: 12
          }
        },
        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
      }
    ]
  }
  myChart4.setOption(option4)
}
</script>