vue3+ts - 折线图的使用

紫菀檀ss

已于 2023-02-07 14:24:41 修改

阅读量1.0k

点赞数 1

分类专栏： vue 文章标签： vue.js echarts 前端

于 2023-02-06 16:07:13 首次发布

本文链接：https://blog.csdn.net/LiaoFengJi/article/details/128902220

版权

本文介绍了在 Vue3 项目中结合 TypeScript 如何使用 ECharts 插件绘制折线图，强调在创建多条折线图时需要注意配置项中的细节，以避免线条点显示错误。并提供了相关代码示例。

摘要由CSDN通过智能技术生成

近期，在做项目的时候有涉及到折线图的模块，所以在这里简单总结一下，有需要的朋友们可自行参考。说到折线图这种图形模块，我们很自然的就想到了echarts 插件了，里面有格式各样的图形效果，可供我们使用。
echarts文档地址：https://echarts.apache.org/examples/zh/index.html#chart-type-bar

一、效果图

在这里插入图片描述

二、注意点

在使用多条折线图时需要注意一下 series 里面的每一项不要加上 stack: "Total"，不然会发现三条折线的值明明是不一样的，但是它们点所在位置是一样的，加和不加的差别是很大的，如下图所示
1、这个是加了 stack: "Total"的效果
在这里插入图片描述

2、这个是没有加stack: "Total"的效果图
在这里插入图片描述

三、全部代码

<template>
  <div class="chart" id="activityDataEchart"></div>
</template>

<script setup lang="ts">
import {
    onMounted, inject, watch } from "vue";
type EChartsOption = echarts.EChartsOption;
const echarts: any = inject("echarts");
let option: EChartsOption;

// 初始化图表
const change = () =>