---

写在前面

上篇文章介绍了在vite+vue的后台项目中使用真实接口替换模拟接口需要步骤，本篇文章介绍如何在vite+vue项目中引入echarts及画一个折线图

完整源码：项目gitee地址

在线演示：演示地址

账号：admin 密码：admin

安装并引入echarts

1、安装：npm install echarts --save

2、引入。进入到src\views\Dashboard.vue页面引入我们刚刚安装的echarts：import * as echarts from 'echarts';

画一个折线图

我们在src\views\Dashboard.vue文件中进行绘制

1、创建一个容器，用来插入我们的折线图<div ref="main" class="main"></div>

2、在onMounted生命周期钩子函数中调用initChart()方法，initChart中包含绘制折线图的代码

当前代码如下：

<template>
    <div ref="main" class="main"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

onMounted(() => {
    initChart()
})

const main = ref()

const initChart = () => {
    // 绘制折线图
}
</script>

<style lang="less" scoped>
.main {
    width: 500px;
    height: 500px;
}
</style>

一个最基础的折线图代码如下：

    let myChart = echarts.init(main.value);
    let option = {
        xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    };
    myChart.setOption(option);

此时页面的图表是这样的，没有单位，鼠标移上去也没有交互，看起来也不是很好看

我们就需要更改他的一些配置来改变他的样式和交互，一些基础常用的代码如下：

常用样式及其代码：

平滑曲线

smooth: true

面积图

areaStyle: {}

最大最小值标注

markPoint: {
    data: [
        { type: 'max', name: 'Max' },
        { type: 'min', name: 'Min' }
    ]
}

纵坐标单位

axisLabel: {
    formatter: '{value} W'
},

鼠标移上去交互

        tooltip: {
            trigger: 'axis'
        },

标题

        title: [
            {
                left: 'center',
                text: '本周用电量统计'
            }
        ],

图表的位置调整

        grid: [
            {
                top: '5%',
                left: '14%',
                bottom: '5%',
                right: '5%'
            },
        ],

标记的图形

symbol: 'triangle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

隐藏图表上的标记

showSymbol: false,

写在最后

以上就是在vite+vue项目中引入echarts并画一个折线图的所有代码和说明