Vue3+Ts Echarts折线图组件封装

已于 2024-01-08 13:40:41 修改
阅读量1.6k 收藏 5
点赞数
文章标签： echarts javascript 前端
于 2023-08-04 10:50:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44476779/article/details/132099125
版权

1. 效果图：
在这里插入图片描述

2. 功能
1. 根据选项动态修改图表显示
2. 动态修改颜色、Y轴单位
3. 可根据配置项动态修改x轴数据为年月日，年(Y)默认展示最近五年，月(M)展示12个月或展示到当前月份，日(D)展示当前月份的天数或展示到当前月当前天

3.话不多说直接上代码,具体说明在最后
c-line-chart.vue

<template>
  <div :id="randomId" :style="`width: ${width};height: ${height}`"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ECharts } from 'echarts'
import { merge, debounce } from 'lodash'
import { parseColorString } from '@/utils/tools'
import { ref, onMounted, watch, shallowRef } from 'vue'

import dayjs from 'dayjs'

interface configXDataType {
  allXData?: boolean
  xDataType?: 'Y' | 'M' | 'D'
}

interface Props {
  width?: string
  height?: string
  option?: any
  unit?: string
  configXData: configXDataType
}
const props = withDefaults(defineProps<Props>(), {
  width: '100%',
  height: '100%',
  configXData: () => {
    return {
      xDataType: 'D',
      allXData: false
    }
  }
})
const randomId = (Math.random() * 100000).toFixed(0)

let color = ref<string[]>([
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc'
])

let myChart = shallowRef<ECharts>()

const hexToRgba = (hex: any, opacity: any) => {
  let rgbaColor = ''
  let reg = /^#[\da-f]{6}$/i
  const colorTest = parseColorString(hex)
  if (reg.test(hex)) {
    rgbaColor = `rgba(${colorTest.r},${colorTest.g},${colorTest.b},${opacity})`
  }
  return rgbaColor
}

const option = (color: string[], xData?: string[]) => {
  return {
    color,
    legend: {
      padding: [20, 20, 0, 0],
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 4,
      x: 'right',
      y: 'top',
      textStyle: {
        color: '#BFD5E0',
        fontSize: 14
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      borderColor: '#000',
      backgroundColor: 'rgba(0, 0, 0, 0.50)',
      formatter: function (params: any) {
        let html = ''
        params.forEach((v: any) => {
          html += `<div style="color: #fff;font-size: 18px;line-height: 25px;">
          <span style="margin-right:8px"> ${v.axisValue}</span>
                <span style="color:${color[v.componentIndex]};
                 font-weight:700;font-size: 18px;font-family: QuartzEF;">${
                   v.value
                 }</span>
                <span style='color:#97A5C5;font-size: 15px'>${
                  props.unit || ''
                }</span>`
        })
        return html
      },
      axisPointer: {
        type: 'line',
        lineStyle: {
          type: 'solid',
          color: 'rgba(168, 181, 189, 0.8)'
        }
      }
    },
    grid: {
      top: '18%',
      left: '12%',
      right: '5%',
      bottom: '15%'
    },
    xAxis: [
      {
        type: 'category',
        interval: 1,
        splitNumber: 4,
        // boundaryGap: false,
        axisLabel: {
          margin: 15,
          textStyle: {
            color: '#BFD5E0',
            fontSize: 14
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        data: xData
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: props.unit,
        axisLabel: {
          textStyle: {
            color: '#BFD5E0',
            fontSize: 14
          }
        },
        nameTextStyle: {
          color: '#BFD5E0',
          fontSize: 14,
          padding: [0, 0, 0, -40]
        },
        splitLine: {
          lineStyle: {
            type: 'solid',
            width: 1,
            color: 'rgba(0, 179, 254, 0.12)'
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    series: [
      {
        type: 'line',
        smooth: true,
        symbol: 'none',
        areaStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: hexToRgba(color[0], 0.6)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[0], 0.2)
                }
              ]
            }
          }
        },
        data: []
      },
      {
        type: 'line',
        smooth: true,
        symbol: 'none',
        symbolSize: 8,
        zlevel: 3,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[1], 0.6)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[1], 0.2)
                }
              ],
              false
            )
          }
        },
        data: []
      },
      {
        type: 'line',
        smooth: true,
        symbol: 'none',
        symbolSize: 8,
        zlevel: 3,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[2], 0.6)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[2], 0.2)
                }
              ],
              false
            )
          }
        },
        data: []
      },
      {
        type: 'line',
        smooth: true,
        symbol: 'none',
        symbolSize: 8,
        zlevel: 3,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[3], 0.6)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[3], 0.2)
                }
              ],
              false
            )
          }
        },
        data: []
      }
    ]
  }
}
const drawChart = debounce(() => {
  myChart.value = echarts.init(document.getElementById(randomId) as HTMLElement)
  color.value = props.option?.color
    ? [...props.option?.color, ...color.value]
    : [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc'
      ]
  myChart.value.setOption(
    merge(option(color.value, getXData(props.configXData)), props.option)
  )
}, 500)
onMounted(() => {
  drawChart()
})

watch(
  () => props,
  () => {
    console.log(props.option)

    drawChart()
  },
  {
    deep: true
  }
)

// 获取x轴数据
const getXData = (configXData: configXDataType) => {
  const allVal = configXData.allXData
  const xDataType = configXData.xDataType
  let xArr: any[] = []
  // 获取近五年数据 //  [2019, 2020, 2021, 2022, 2023]
  if (xDataType == 'Y') {
    // 获取近五年数据
    const year = parseInt(dayjs().format('YYYY'))
    for (let i = year; i > year - 5; i--) {
      xArr.unshift(i)
    }
  }
  // 获取今年 所有月份
  if (xDataType == 'M') {
    if (!allVal) {
      console.log(dayjs().format('M'))
      for (let i = 1; i <= parseInt(dayjs().format('M')); i++) {
        xArr.push(i)
      }
    } else {
      for (let i = 1; i <= 12; i++) {
        xArr.push(i)
      }
    }
  }
  // 获取本月所有天
  if (xDataType == 'D') {
    if (!allVal) {
      for (let i = 1; i <= parseInt(dayjs().format('D')); i++) {
        xArr.push(i)
      }
    } else {
      let dayLength = parseFloat(dayjs().endOf('month').format('DD'))
      for (let i = 1; i <= dayLength; i++) {
        xArr.push(i)
      }
    }
  }
  return xArr
}
</script>

<style scoped lang="scss">
:deep(.charts-bg) {
  // padding: 23px 32px;
  background-size: 100% 100%;
  font-family: 'Source Han Sans CN';
  position: absolute;
  display: block;

  .charts-value {
    font-family: QuartzEF;
  }
}
</style>

------------------------------------- tools.ts -----------------------------------------------

方法用于颜色转换

export const parseColorString = (color: string) => {
  if (color.startsWith('#')) {
    return parseHexColor(color)
  } else if (color.startsWith('rgb')) {
    return parseRgbaColor(color)
  } else if (color === 'transparent') {
    return parseHexColor('#00000000')
  }
  throw new Error(`color string error: ${color}`)
}

/**
 * 16进制颜色字符串解析为颜色对象
 * @param color 颜色字符串
 * @returns IColorObj
 */
export const parseHexColor = (color: string) => {
  let hex = color.slice(1)
  let a = 1
  if (hex.length === 3) {
    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
  }
  if (hex.length === 8) {
    a = parseInt(hex.slice(6), 16) / 255
    hex = hex.slice(0, 6)
  }
  const bigint = parseInt(hex, 16)
  return {
    r: (bigint >> 16) & 255,
    g: (bigint >> 8) & 255,
    b: bigint & 255,
    a
  } as IColorObj
}

/**
 * rgba颜色字符串解析为颜色对象
 * @param color 颜色字符串
 * @returns IColorObj
 */
export const parseRgbaColor = (color: string) => {
  const arr = color.match(/(\d(\.\d+)?)+/g) || []
  const res = arr.map((s: string) => parseInt(s, 10))
  return {
    r: res[0],
    g: res[1],
    b: res[2],
    a: parseFloat(arr[3])
  } as IColorObj
}

组件说明

组件名称 c-line-chart

依赖包 echarts、dayjs、lodash
传参
  width?:   图表宽度、默认父盒子宽度
  height?:  图表高度、默认父盒子高度
  option:   图表配置项、与echarts官网配置相同，具体配置见 echarts官网
  unit?:    图表Y轴单位
  configXData: {
    allXData?: boolean              是否展示x轴xDataType类型的所有值,true：展示所有  false：展示到当前日期
    xDataType?: 'Y' | 'M' | 'D'     Y:默认展示最近五年、M:展示月份、D:当前月的天
  }

echarts 官网

注意事项

  1. option 默认提供颜色选项,如要修改图表中颜色,在 option 中添加属性 color 即可,动态修改可指定 option 为 reactive 类型, 使用 option.color= [“#ff0000”,“#2e375s”] 即可动态修改
    颜色建议使用 AEX(“#FF0000”)类型

        const option =reactive({
        color:[""]  // 指定默认值,不指定删除即可,使用echarts默认颜色
    })
    option.color = ["#ff0000","#2e375s"]  // 修改颜色

  2. 修改折线图渐变, 在开发中折线图图表渐变样式一般都统一,暂不做配置项修改,直接修改代码 option.series.areaStyle.colorStops 设置颜色透明度,达到满意即可

 colorStops: [
        {
            offset: 0,
            color: hexToRgba(color[0], 0.6)
        },
        {
            offset: 1,
            color: hexToRgba(color[0], 0.2)
        }
]
  1. 图表数据改变时,图例依然保持上一个图表的数据,举个例子：数据一三条线三个图例,数据二两条线两个图例,由数据一的图表切换到数据二的图表时,option 中的 series 的第三条数据依然存在,这是因为传入组件的 series 只有前两条改变了数据,第三条没有变化。解决：切换到第二个图表时手动将整个 series 重置(可以先置空,然后对 name 和 data 赋值),对于 series 有很多自定义配置项时，可将其他非本图表的所有 series 的 name 和 data 手动置空
    options.series=[]
    options.series[0].data = [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 17]
    options.series[1].data = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
    或者
    options.series[2] = { name: '', data: [] }

本文只提供一种封装思路，有更好的方法或问题欢迎评论或私聊🙂

牛马人生
关注
vue3+ts - 折线图的使用
sunshime的博客
02-06 1158
近期，在做项目的时候有涉及到折线图的模块，所以在这里简单总结一下，有需要的朋友们可自行参考。说到折线图这种图形模块，我们很自然的就想到了echarts 插件了，里面有格式各样的图形效果，可供我们使用。
VUE3利用 echarts 绘制折线图
LQ_001的博客
02-26 1899
VUE3利用echarts绘制折线图
实战篇：（八）Vue2项目中使用 echarts（5.2.2）图表组件含代码
最新发布
mmc123125的博客
10-10 688
Vue2项目中使用 echarts（5.2.2）图表组件： fontSize：根据屏幕分辨率计算字体大小，确保在不同屏幕下自适应。 initChart：初始化图表实例，加载初始数据。 updateChart：更新图表数据，通过 setOption 函数实现增量更新，避免图表重新渲染。 disposeChart：在组件销毁前释放图表实例。 buildOptions：生成 ECharts 图表的配置项，包括系列数据、x 轴、y
在vue3中用echart绘制一个折线图,完全小白复制即可用。
weixin_44780502的博客
02-26 2017
在一点都不了解的情况下,vue3使用echart绘制一个折线图,小白复制可用.
vue3+ts 封装插件
weixin_48091030的博客
01-19 926
在我们编写代码中，会遇到某功能在同一个项目中多次使用的场景，在多个项目时，会遇到A项目的一个功能也可以嫁接到B项目,C项目的时候 我们就可以封装插件。5：使用：在使用时需要注意 不时是 而是你组件的名字 首先将components中的某个组件抽离到项目（src）外，如图，node_modules的同一级。目录不在项目的文件列表中,项目必须列出所有文件,或使用“include“模式。6：注意：在vue3+ts的环境下引入src外的项目可能会报错（
封装echarts折线图（基于Vue3、TS）
C90283的博客
03-16 482
封装echart折线图
Vue3+ts封装一个简单版的Message组件
qq_32021429的博客
09-01 926
项目中需要使用信息提示框的功能，ui组件库使用的是字节的arco-design-vue。看了一下，现有的Message不满足要是需求，直接使用message组件的话，改样式太麻烦。Notification组件样式倒是符合了，但是弹出的位置不符合，查看了一下相关api，这位置不支持"top"。既然如此，那就去查看它俩的源码，找到我想要的，修修改改，自己也写一个，嘻嘻。
vue3+ts+echarts实现echarts封装
08-01
在父组件中使用这个封装好的ECharts组件，只需要提供`option`和`el`即可： ```html ; height: 400px;"> <script lang="ts"> import ECharts from './ECharts.vue'; export default { components: { ECharts ...
vue3+ts - 折线图和柱状图综合使用
sunshime的博客
02-06 931
近期，在做项目的时候有涉及到柱状图和折线图共同放在一个图表里面的效果，所以在这里简单总结一下，有需要的朋友们可自行参考。
echarts组件（vue3封装）
01-12
在结合Vue3的情况下，我们可以对ECharts进行封装，以提高代码的复用性和适应性，这就是"echarts组件（vue3封装）"的主题。 首先，我们要了解Vue3的特性。Vue3引入了Composition API，这是一种全新的组织组件逻辑的...
【Vue3】vue3 + ts 封装城市选择组件
一个前端开发者
02-28 8289
城市数据并不是直接从接口服务器中获取的，而是从阿里云服务器上获取的数据，所以不能使用封装好的request发送请求，直接使用。注意：完整地址需要父组件传递给子组件，将来如果登录的用户，父组件可以获取到完整的地址。能够封装城市选择组件，并且完成基础的显示隐藏的交互功能。（3）子组件选择完城市，需要将数据传递给父组件。（1）父组件将城市数据传递给子组件。（2）子组件接收，并且进行展示。（4）点击弹层外部，关闭弹层。（4）点击弹层外部，关闭弹层。（4）父组件接受数据并且处理。（4）父组件接受数据并且处理。
vue3+tsx封装组件
weixin_44440116的博客
08-24 1070
组件封装
vue3中，vue-echarts基本使用（柱状图、饼图、折线图）
热门推荐
mq1314520_zhl的博客
01-12 1万+
注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个echarts官网地址：Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。安装vue-echarts注意：Vue 2下使用，必须还要安装main.js中全局注册组件。
vue3+ts封装组件经验
baby_lx的博客
05-26 965
vue3+ts封装组件经验
vue3 echarts 折线图
weixin_55202021的博客
10-09 440
【代码】vue3 echarts 折线图。
vue3使用echarts折线图
weixin_45352420的博客
08-19 321
2、main.js中引用import echarts from ‘echarts’，也可以在需要用到的页面单独引用。1、下载echarts:npm i echarts.
Vue3+Ts封装类似el-dialog的对话框组件
qq_59625204的博客
08-15 575
closeOnClickModal: 是否点击遮罩层关闭抽屉,appendToBody: 是否将对话框添加至body,modelValue: 对话框显示隐藏控制,showConfirm: 是否显示确认按钮,showCancel: 是否显示取消按钮,cancelText: 取消按钮的文本,confirmText: 确认按钮的文本。top: 控制对话框个距离顶部的距离,width: 控制对话框的宽度,height：控制对话框的高度,title: 控制对话框的标题,dialog.vue代码如下。
Vue3+Echarts常用属性总结之折线图
幽幽谷
09-06 2560
Vue3+Echarts常用属性总结之折线图
vue3+ts+echarts折线图超出阈值变红、visualMap报错问题处理
Missxu1895的博客
04-28 408
vue3+ts+echarts制作折线图，折线图超出阈值变红，visualMap报错 TypeError: Cannot read properties of undefined (reading 'coord')，Cannot set properties of undefined (setting 'hoverState')
vue3+ts实现折线图
12-06
以下是使用Vue3和TypeScript实现折线图的步骤： 1.安装echarts和vue-echarts依赖： ```shell npm install echarts vue-echarts@5.0.0-beta.3 ``` 2.在Vue组件中引入依赖： ```typescript import { defineComponent } from 'vue' import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { LineChart } from 'echarts/charts' import { GridComponent, TooltipComponent } from 'echarts/components' import { EChartsOption } from 'echarts/types/dist/shared' import VueECharts from 'vue-echarts' use([CanvasRenderer, LineChart, GridComponent, TooltipComponent]) ``` 3.定义数据和配置项： ```typescript const data = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] } const options: EChartsOption = { title: { text: '折线图示例' }, tooltip: { trigger: 'axis' }, legend: { data: ['销量'] }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} 件' } }, series: [{ name: '销量', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }] } ``` 4.在Vue组件中使用VueECharts组件： ```typescript export default defineComponent({ components: { VueECharts }, data() { return { data, options } }, template: ` <div> <vue-echarts :options="options" :data="data" /> </div> ` }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值