Vue3+Ts Echarts折线图组件封装

已于 2024-01-08 13:40:41 修改
阅读量1.2k 收藏 4
点赞数
文章标签： 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: [] }

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

当牛做马*
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧
vue组件封装echart折线图
08-30
直接定义vue数据和承载的DIV,即可实现复用。使用Vue组件封装Echart柱状图，直接引用组件js，并且在需要展示的地方，进行Vue数据传值，支持多坐标轴。本案例非Webpack打包，直接引用JS即可。适用于部分页面使用Vue功能，或者想尝试Vue功能的同学。该组件使用方法比较简单，也可以自行修改样式扩展功能，但是需要自行查看echart的api配置文档。
vue3+ts echarts的使用
qq_40912618的博客
12-06 469
vue3+ts按需引入echarts，以雷达图为例：1、安装echarts npm install echarts --save 2、在utils文件夹下创建一个echarts.js文件 3、在需要使用的页面里先定义一个容器，然后将图表放入这个容器
vue3 封装ECharts组件
Huangxianlong的博客
04-26 5196
前端开发需要经常使用ECharts图表渲染数据信息，在一个项目中我们经常需要使用多个图表，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率。
在vue3中用echart绘制一个折线图,完全小白复制即可用。
最新发布
weixin_44780502的博客
02-26 755
在一点都不了解的情况下,vue3使用echart绘制一个折线图,小白复制可用.
在vue中使用echarts(折线图的demo,markline用法)
10-15
主要介绍了在vue中使用echarts(折线图的demo,markline用法)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如何在vue3中封装并使用echarts组件
du_aitiantian的博客
08-17 3106
在vue3中封装并使用echarts组件。
vue3 使用echarts——折线图
weixin_44867717的博客
11-18 6473
vue3 使用echarts——折线图 效果 使用流程 1、安包 cnpm install echarts --save 2、页面使用 index.vue <template> <div id="myChart123" :style="{width: '1500px', height: '550px'}"></div> </template> <script lang="ts"> // 引入echarts import * as ech
vue3+ts中使用echarts
sunddy_x的博客
04-26 9788
vue3 + ts 中使用ECharts
Vue3+TS中引入ECharts（按需引入，简单教程）
宝子的博客
06-15 6975
Vue3+TS的项目中使用ECharts。很简单的操作一看就会。
vue3中，vue-echarts基本使用（柱状图、饼图、折线图）
mq1314520_zhl的博客
01-12 6582
注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个echarts官网地址：Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。安装vue-echarts注意：Vue 2下使用，必须还要安装main.js中全局注册组件。
vue3+ts+echarts实现echarts封装
08-01
vue3+ts+echarts实现echarts封装
HTML+VUE+Echarts折线图让某一个点闪烁
11-04
HTML+VUE+Echarts折线图让某一个点闪烁
vue+echarts实现动态折线图的方法与注意
10-14
主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts+vite+router+vuex+api请求封装
12-29
后台管理系统脚手架
vue3使用Echarts，Ts按需引入
weixin_43193877的博客
02-10 2599
vue3使用echarts，Vue3+Vite 使用Echarts，ts使用echarts
vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染
YZRHANYU的博客
03-15 4029
vue3+ts 之echarts的使用 以及 echarts 图表初始不渲染,代码改变之后才渲染
Vue3中使用Echarts（Vue3+Ts）
qq_41634323的博客
06-01 2084
Vue3中使用Echarts（Vue3+Ts）
VUE3中使用echarts折线图弹窗
05-24
要在Vue3中使用echarts折线图弹窗，您需要使用Vue3的组件API和Echarts的相关API。 以下是一个简单的示例代码： ``` <template> <div> <div ref="chart" style="height: 400px;"></div> <el-dialog :visible.sync="dialogVisible"> <div ref="dialogChart" style="height: 400px;"></div> </el-dialog> </div> </template> <script> import * as echarts from 'echarts' export default { data() { return { dialogVisible: false, chartData: [ [10, 20, 30, 40, 50], [20, 30, 40, 50, 60] ] } }, mounted() { this.drawChart() }, methods: { drawChart() { const chart = echarts.init(this.$refs.chart) chart.setOption({ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] }, yAxis: { type: 'value' }, series: [{ data: this.chartData[0], type: 'line' }, { data: this.chartData[1], type: 'line' }] }) chart.on('click', this.handleChartClick) }, handleChartClick(params) { const dialogChart = echarts.init(this.$refs.dialogChart) dialogChart.setOption({ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] }, yAxis: { type: 'value' }, series: [{ data: this.chartData[params.seriesIndex], type: 'line' }] }) this.dialogVisible = true } } } </script> ``` 在这个例子中，我们首先使用Echarts的API在组件的`mounted`生命周期方法中绘制了一个折线图。然后，我们使用Echarts的`on`方法监听了折线图的点击事件，并在点击时绘制了一个新的折线图并打开了一个弹窗。 注意，我们使用了Element UI的`el-dialog`组件来实现弹窗。您可能需要根据您的具体需求来调整弹窗的样式和行为。 希望这个例子能够帮助您在Vue3中使用Echarts绘制折线图，并且实现弹窗交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值