vue3 引入echarts（未使用Ts）

官网引入echarts

快速上手 - Handbook - Apache ECharts

npm install echarts --save

在项目需要使用的页面进行引入

import * as echarts from 'echarts';

<div class="myEcharts" ref="mainEcharts"></div>

import {ref,onMounted} from "vue";

const boxListFirst = ref({
  xAxis:['10-20','10-21','10-22','10-23','10-24','10-25','10-26','10-27','10-28','10-29','10-30','10-31','11-01','11-02','11-03','11-04','11-05','11-06','11-07','11-08'],
  yAxis:['1000','2000','1500','1600','2500','3000','1000','2000','1500','1600','2500','3000','1000','2000','1500','1600','2500','1000','2000','3000']
})
const mainEcharts = ref()

function initEcharts() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(mainEcharts.value);
  // 指定图表的配置项和数据
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        label: {
          backgroundColor: '#BBC9DB'
        }
      }
    },
    grid:{ // 让图表占满容器
      top:"30px",
      left:"80px",
      right:"40px",
      bottom:"20px"
    },
    // x轴设置
    xAxis: {
      data: boxListFirst.value.xAxis,
      axisTick: {
        show: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#6388b9' // 设置 x 轴线条颜色
        }
      },
      axisLabel: {
        color: '#BBC9DB',
        fontSize: 12
      }
    },
    dataZoom: [
      {
        type: 'inside', // 设置为滑动条类型
        start: 0, // 起始位置为0
        end: 100 // 结束位置为第7个数据点，因为索引从0开始，所以是6
      }
    ],
    // y轴设置
    yAxis: [
      {
        // 第一条纵坐标轴
        type: 'value',
        name:'单位/单',
        nameTextStyle: {
          color: "#D1E4FF",
          fontSize: 14,
          padding: [0, 0, 0, 0], //name文字位置 对应 上右下左
        },
        position: 'left',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#6388b9' // 设置 y 轴线条颜色
          }
        },

        splitLine: {
          //网格线
          show: true, //是否显示
          lineStyle: {
            //网格线样式
            color: 'rgba(27,69,126)', //网格线颜色
            width: 1, //网格线的加粗程度
            type: 'dashed' //网格线类型
          }
        },
        axisLabel: {
          color: '#BBC9DB',
          fontSize: 14,
          // interval: 0,
          // rotate: 35
          formatter: '{value}'
        }
      }
    ],
    // 数据系列
    series: [
      {
        name: '当月订单量（条）',
        type: 'bar',
        data: boxListFirst.value.yAxis, // 系列2对应的数据
        yAxisIndex: 0,
        barWidth: 25,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgb(27,174,243, 1)' },
            { offset: 1, color: 'rgb(57,141,255, 1)' }
          ])
        }
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
onMounted(
    () => {
      initEcharts()
    }
)

 

grid:{ // 让图表占满容器
  top:"30px",
  left:"80px",
  right:"40px",
  bottom:"20px"
},

grid 确定是否铺满区域

nameTextStyle: {
  color: "#D1E4FF",
  fontSize: 14,
  padding: [0, 0, 0, 0], //name文字位置 对应 上右下左
},

nameTextStyle Y轴上方name样式调整