vue3+TS+echarts 折线图

需要实现的效果如下

vue3+TS+echarts 折线图_第1张图片





封装echarts统一调用

import * as echarts from 'echarts'

/**
 * @description: 初始化echarts
 * @param {typeof echarts} echartsInstance echarts实例
 * @param {string} id dom的id
 * @param {('canvas' | 'svg')} renderer 渲染方式
 * @returns {echarts.ECharts} echarts实例
 */
export function getInitecharts(
  echartsInstance: typeof echarts,
  id: string,
  renderer: 'canvas' | 'svg' = 'canvas',
): echarts.ECharts {
  const dom = document.getElementById(id)
  if (!dom) {
    throw new Error(`Element with id "${id}" not found`)
  }
  return echartsInstance.init(dom, null, {
    renderer,
    useDirtyRect: false,
  })
}

你可能感兴趣的:(echarts,vue.js,前端)