小白终成大白4

工作笔记

前言

在一点都不了解的情况下,使用echart绘制一个折线图
话不多说先问ai
分享给大家 我用的ai地址
👋面对AI焦虑，您没必要跟汽车赛跑，而是应该考个驾照：
https://my.aigcplus.io/auth/register?inviteCode=3AMM96RJE

好家伙,问了半天,复制粘贴没出来图
好吧
参照echart官网 下载了一个示例
官网如下:
https://echarts.apache.org/zh/index.html

长这样子

一、场景

在vue3项目 中插入一个折线图

二、使用步骤

1.安装 echarts

代码如下（示例）：

npm install echarts

2.添加一个div容器 用于折线图在里面

代码如下（示例）：

<div id="container" style="height: 100%"></div>

3.导入

代码如下（示例）：

导入

import * as echarts from "echarts";

4.绘制折线图

代码如下（示例）：

 onMounted(() => {
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom, null, {
    renderer: "canvas",
    useDirtyRect: false,
  });
  var option;
  option = {
    xAxis: {
      type: "category",
      data: ["大湾区站", "苏州站", "温州站", "金赛特邀站", "西安站"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };

  if (option && typeof option === "object") {
    myChart.setOption(option);
  }
});

三、option对象中其他常用参数举例

1.smooth 平滑折线图

代码中添加smooth变量

  option = {
    xAxis: {
      type: "category",
      data: ["大湾区站", "苏州站", "温州站", "金赛特邀站", "西安站"],
    },
    yAxis: {
      name: "单位：人",
      type: "value",
    },
    series: [
      {
        smooth: true,//平滑曲线
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };

2.areaStyle 区域面积样式

代码添加 areaStyle

  option = {
    xAxis: {
      type: "category",
      data: ["大湾区站", "苏州站", "温州站", "金赛特邀站", "西安站"],
    },
    yAxis: {
      name: "单位：人",
      type: "value",
    },
    series: [
      {
        //smooth: true,//平滑曲线
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
         areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(5, 115, 233, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(5,114,233,0)",
            },
          ]),
        },
      },
    ],
  };

备注

感谢您的阅读 !