echarts折线图（Vue3系统篇八）

1、介绍和安装

首先来看看官网的地址，我们可以进入echarts官网查看案例并且在线调试，这个功能真的非常的方便。

echarts.apache.org/examples/zh...

👉 安装

js 复制代码

yarn add echarts

这里需要注意echarts4和echarts5 之间的一些配置还是不一样的

我本地的echarts版本是5

js 复制代码

"echarts": "^5.5.0",

2、引入和使用

版本区别（引入方式不同）

这里需要注意的就是echarts版本4升级版本5，所采用的引入方式不同

❤版本4

bash 复制代码

import echarts from 'echarts';

❤版本5

bash 复制代码

import * as echarts from 'echarts';

这里只需要更改一下引入的方式就可以了

👉 按照官方的案例我们看看在vue3之中使用echarts版本5的方式：

引入

bash 复制代码

👉 引入我们的echarts
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

👉结构部分一定要记得写个宽高

js 复制代码

<div ref="chartRef" style="width: 100%; height: 400px;"></div>

👉 挂载的时候渲染方法

js 复制代码

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

// 创建对 DOM 元素的引用
const chartRef = ref(null);

onMounted(() => {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(chartRef.value);

  // 设置图表的配置项和数据
  const option = {
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 30]
      }
    ]
  };

  // 使用配置项和数据显示图表
  chart.setOption(option);
});
</script>

这里我们直接放上所有代码

js 复制代码

<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

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

// 创建对 DOM 元素的引用
const chartRef = ref(null);

onMounted(() => {
  // 在 DOM 挂载后初始化 ECharts
  const chart = echarts.init(chartRef.value);

  // 设置图表的配置项和数据
  const option = {
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 30]
      }
    ]
  };

  // 使用配置项和数据显示图表
  chart.setOption(option);
});
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>

预览一下我们的效果

3、详细使用（基本参数）

介绍完了echarts图的基本使用，接下来我们详细说说一些echarts图的一些详细的参数和使用

👉折线图推拽dataZoom

dataZoom 拖动滑动x轴，为我们提供了巨大的帮助，层级与xAxis平级，有时候我们需要拖动滑动x轴底部缩放。

日常使用

js 复制代码

dataZoom: [
          {
            type: 'inside',
            start: 40,
            end: 100
          },
          {
            start: 40,
            end: 100
          }
 ],

我们自己自定义使用

js 复制代码

 dataZoom: [{
      type: 'inside', //1平移 缩放
      throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
      minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
      start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
      end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
      zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
}],

👉折线图平滑属性smooth

有时候我们想要让折线图平滑一些，这就需要用到smooth这个属性

🍎smooth 决定了线段的类型，直线或者曲线，层级与series下的data平级

js 复制代码

 series: [
    // 折线图--人数
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true,
      // areaStyle: {}
    }
]
  
smooth: true，// true为平滑线段  false为折线，默认为false

👉 折线图legend属性

有时候我们需要使用legend这部分自定义，这里需要注意legend上面和下面的数据的name得对应上才能正确显示！

自定义legend宽高

js 复制代码

legend: {
   // 自定义 Legend 的显示内容
     data: ['数据1', '数据2'],
     // 自定义 Legend 的宽度和高度
     width: 300,
     height: 50
 },

自定义 Legend 中每个图例项的样式

js 复制代码

//自定义 Legend 中每个图例项的样式
legend: {
    // 自定义 Legend 的显示内容
    data: ['数据1', '数据2'],
    color: ['#000', '#1890FF', '#1890FF'],
    // 自定义 Legend 的宽度和高度
    itemWidth: 10,// 设置每个小块的宽度和高度
    itemheight: 18,// 设置每个小块的宽度和高度
    itemStyle: { }
  },

👉折线图面积图形式

有时候我们需要让echarts折线图变成面积图

🍎areaStyle: {} 决定了你的图形是否是面积图，层级与series下的data平级

js 复制代码

 areaStyle: {}

👉更改鼠标悬浮框效果tooltip

有时候我们需要更改鼠标悬浮上去以后的效果

鼠标悬浮框显示调整

🍎 tooltip 可以帮助我们实现 echarts 鼠标悬浮上去的效果，层级与xAxis平级

js 复制代码

tooltip: { trigger: 'axis'},

鼠标悬浮框辅助线

axisPointer

js 复制代码

tooltip: {
    trigger: 'axis',
    // 辅助线
    axisPointer: {
      type: 'line', // 辅助线类型，可选为：'line' | 'shadow' | 'cross'
      lineStyle: {
        color: '#1890FF', // 辅助线颜色
        type: 'dashed'
      }
    }
  },

👉鼠标悬浮提示框formatter

有时候我们需要在鼠标移动上去以后，更改鼠标的提示框数据以及子自定义鼠标的提示框样式，这个时候我们就需要用到formatter 这个属性。

formatter 基础使用和更改

js 复制代码

tooltip: {
    trigger: 'axis',
    // 悬浮框提示
    formatter: '{b} <br> 检测趋势：{c}',
  },

bash 复制代码

（1）{a}：系列名，series.name。

（2）{b}：数据名，xAxis.data。

（3）{c}：数据值，yAxis.data。

（5）{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。

（6）{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
------------------------------------------------
换行添加 <br/>

多个属性

bash 复制代码

formatter:"{b0}:{c0}<br/>{b1}:{c1}"

自定义格式

js 复制代码

formatter(params) {
    return `
    <div>
      <div style="font-size:12px;color:#000">(这里有个美元符号){params[0].name}</div>
         <div style="font-size:12px;color:#1AB5AF"><span  style="font-size:12px;color:#000">(这里有个美元符号){params[0].value}%</span></div>
      </div>`;
  },

自定义提示数据的类型

bash 复制代码

 formatter:function(v){
         vartext=v.name;
         returntext.length>10?text.substr(0,10)+"...":text;
}

👉鼠标悬浮鼠标悬浮框样式更改

悬浮框上我们还可以操作其他其他详细显示参数

bash 复制代码

tooltip: {
        show: true,                  // 是否显示提示框，默认为 true
        trigger: 'item',             // 触发类型，可选值: 'item'（数据项触发），'axis'（坐标轴触发），'none'（不触发）
        axisPointer: {               // 坐标轴指示器配置项
            type: 'line',            // 指示器类型，可选值: 'line'（直线指示器），'shadow'（阴影指示器），'cross'（十字准星指示器）
            lineStyle: {             // 直线指示器样式设置
                color: '#aaa'        // 线条颜色
            },
            crossStyle: {            // 十字准星指示器样式设置
                color: '#aaa'        // 线条颜色
            },
            shadowStyle: {           // 阴影指示器样式设置
                color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
        },
        backgroundColor: 'rgba(0,0,0,0.7)',  // 提示框背景色
        padding: [5, 10],                     // 内边距
        textStyle: {                           // 文本样式
            color: '#fff',                     // 文本颜色
            fontSize: 12                       // 文本字号
        },
        formatter: '{b}: {c}',                  // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
        // 更多配置项...
    },
    
    ```

👉调整折线图的边距和位置

有时候我们需要调整图表位置，以进行兼容

🍎 grid 可以帮助我们实现 echarts 鼠标悬浮上去的效果，层级与xAxis平级

js 复制代码

   grid: {
    left: '5%', //距离左侧边距
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

🍌 当然gaid还有另外一种写法，哪种需要就用哪种

js 复制代码

  grid: { 
    x: "10%", //x 偏移量 
    y: "7%", // y 偏移量 
    width: "85%", // 宽度 
    height: "55%", // 高度 
    right: "15%", 
  },

👉 echarts动画

有时候我们的echarts显示显得略微僵硬，这个时候我们就需要用到动画。

js 复制代码

    animation: true,//动画 
    // animationEasing:'cubicOut',//动画的缓动方式
      animationDuration:15000,//持续时间

👉折线图拐点markPoint属性

有时候拐点也需要我们自己进行处理，以防止于视图风格不符合。

拐点markPoint属性使用

bash 复制代码

option = {  
    series: [{  
        type: 'line',  
        data: [/* 数据 */],  
        markPoint: {  
            symbol: 'circle', // 设置拐点小圆点  
            // 其他配置项...  
        }, 
        symbolSize:8, // 设置拐点小圆点大小
        // 其他配置项...  
    }],  
    // 其他配置项...  
};

'circle': 圆形标记。 'rect': 矩形标记。 'roundRect': 带圆角的矩形标记。 'triangle': 三角形标记。 'diamond': 菱形标记。 'pin': 标记形状为图钉，这种类型主要用于地图上的标记。 'arrow': 标记形状为箭头，这种类型主要用于地图上的标记。

设置拐点小圆点大小

bash 复制代码

option = {  
    series: [{  
        type: 'line',  
        data: [/* 数据 */],  
        markPoint: {  
            symbol: 'circle', // 设置拐点小圆点  
        }, 
        symbolSize:8, // 设置拐点小圆点大小
        // 其他配置项...  
    }],  
    // 其他配置项...  
};

拐点自定义图片

js 复制代码

 // 设置标记点的图片链接
 var markPointImage = 'https://echarts.apache.org/examples/data/asset/img/echarts-logo.png';
	series: [{
         type: 'line',
             data: data,
             markPoint: {
                 symbol: `image://(这里有个美元符号){markPointImage}`, // 设置标记点的形状为图片
                 symbolSize: 40, // 设置标记点的大小
                 data: [
                     { type: 'max', name: '最大值' }, // 添加最大值的标记点
                     { type: 'min', name: '最小值' }  // 添加最小值的标记点
                 ]
             }
	 }]

最后我们看到的就是这个样子

👉折线图跳过空白

有时候也许，我们不需要数据，但是也需要让他没有，这个时候我们就必须调节

c 复制代码

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, , 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

4、详细使用（x轴）

👉 x轴设置间隔个数显示

主要是调整xAxis里面的interval这个属性，显示x轴的间隔个数

👉这里我们还可以单独设置只是显示奇数个数

js 复制代码

axisLabel:{ interval:间隔数量 }

// 只是显示奇数个数
axisLabel:{ interval:0 }

👉 调整x轴分割线

主要是调整xAxis里面的splitLine这个属性

这里我们简单调整一下

js 复制代码

splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(133, 194, 252, 0.2)',
              type: 'solid'
        }
 }

最后结果如下：

👉 x轴数据过多无法显示

🍎dataZoom 拖动滑动x轴，为我们提供了巨大的帮助，层级与xAxis平级。

js 复制代码

dataZoom: [{
  type: 'inside', //1平移 缩放
  throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
  minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
  start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
  end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
  zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
}],

最后我们鼠标放上去的时候就可以进行拖拽

👉 x轴数据格式自定义

重新定义x轴数据

js 复制代码

axisLabel: {
formatter: function (value, index) {
    // 在这里可以编写自定义的格式化逻辑
    // 例如，将日期格式转换为特定格式
    return value.replace(/(\d{4})-(\d{2})-(\d{2})/, `(这里有个美元符号)2月'(这里有个美元符号)3`);
    // return value.replace(/(\d{4})-(\d{2})-(\d{2})/, `(这里有个美元符号)3/(这里有个美元符号)2/(这里有个美元符号)1`); // 2023年06月01 01-06-2023
}
}

👉 x轴数据设置横向标记线

添加进入series下的[{}]里面的{}之中

js 复制代码

 markLine: {
    silent: true,
    lineStyle: {
      type: 'dashed', // 基准线样式为虚线
      color: 'red'
    },
    data: [
      {
        yAxis: 200, // 自定义下限值
        // name: '最小值', // 基准线名称
        label: {
          show: false
        }
      }
    ]
  },

最后我们看看效果，注意这个红色就是添加的线！！

5、详细使用（y轴）

👉 Y轴设置左侧顶部标题

🍎 title 可以帮助我们实现 echarts y轴顶部的标题，层级与xAxis平级

js 复制代码

title: { text: 'Stacked Line' },

注意这里是标题y轴上的，不是中间的legend 标题

👉y轴显示顶部数值

js 复制代码

 label: {
    show: true,
     position: 'top'
   },

👉y轴左边轴承数值背后添加单位

这里添加单位其实就是y轴的数据格式重新定义

设置yAxis => axisLabel => formatter

js 复制代码

  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: function (value, index) {
        return value + ' kg'; // 将原始数值与单位字符串拼接起来
      }
    }
  },

这里就是设置我们的这部分

👉 y轴左侧字体样式

js 复制代码

yAxis: {
    type: 'value',
     axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: 'red' //Y轴内容文字颜色
            }
      },
  },

👉y轴刻度的值跟实际值不对应：

首先就是遇到的数据值不对应问题

y轴轴线

js 复制代码

axisLine: {
    //y轴线的配置
    show: true, //是否展示
    lineStyle: {
      color: 'rgba(133, 194, 252, 0.8)', //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
      width: 1, //y轴线的宽度
      type: 'solid' //y轴线为实线
    }
},

6、存在的问题处理

当然了，在Echarts折线图的使用过程之中，我们也会遇到一些匪夷所思的问题，所有这里我们记录一下；

👉y轴刻度的值跟实际值不对应：

首先就是遇到的数据值不对应问题，先来看看我们图片部分

代码配置如下：

bash 复制代码

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 250, 224, 218, 135, 147, 260],
      type: 'line',
      stack:'Total',
    },
    {
      data:[15,51,150,18,25,29,59,56],
      type:'line',
      stack:'Total',
    }
  ]
};

原因：

series设置了stack参数，并且stack 名称是一样的

官网对于stack参数属性介绍如下：

属性地址： echarts.apache.org/zh/option.h...

介绍：

解决方案1: 将series中的"stack"属性删除（推荐）
效果：（这里我们直接用就生效了）
解决方案2:(这个方案也是我推荐的方法 ) 将series中的"stack"属性名称改为不一致（不推荐）

👉x轴过量数据滑动问题

其实就是上面的我们说的x轴滑动拖拽

也就是在echarts折线图x轴数据过多的时候调整dataZoom属性就可以啦

👉 图表的清空与重新渲染

有时候我们需要重新清除一下图表

bash 复制代码

// 清空图表
myChart.clear();
将图表清空，但不会销毁 ECharts 实例


销毁 ECharts 实例，可以调用 dispose 方法

// 设置初始配置项
myChart.setOption(option);