echarts按需引入

2019-05-06 8

一般会引入所有 ECharts 中所有的图表和组件,因此体积会比较大,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块。

echarts按需引入

1、echarts v4 版本按需引入

1.1、安装equire插件

npm i -D babel-plugin-equire

"babel-plugin-equire": "1.1.1" 

1.2、修改babel配置

babel.config.js

module.exports = {
  'plugins': [
    'equire'
  ]
}

1.3、封装公共初始化方法

vendor/echarts/index.js

// 使用JSON格式registerTheme,js注册方式会影响equire按需引入
import theme from './theme.json'
/**
 * 按需引入Echarts模块
 * @param {Array} 需要引入的模块
 * @see {*} https://github.com/ywwhack/babel-plugin-equire#转化规则
 */
// eslint-disable-next-line
const echarts = equire([ // 正常打包
// const equireCharts = equireAsync([ // 动态引入,单独一个包
  /** @chart 图表类型 */
  'bar', // 柱状图
  // 'boxplot', // 箱形图
  // 'candlestick', // K线图
  // 'chord', // 弦图
  'custom', // 自定义系列
  // 'effectScatter', // 带有涟漪特效动画的散点(气泡)图
  // 'funnel', // 漏斗图
  // 'gauge', // 仪表盘
  // 'graph', // 关系图
  // 'heatmap', // 热力图
  'line', // 折线、面积图
  // 'lines', // 路径图
  // 'map', // 地图
  // 'parallel', // 平行坐标系的系列
  // 'pictorialBar', // 象形柱图
  'pie', // 饼图
  'echarts/lib/chart/radar', // 雷达图
  // 'sankey', // 桑基图
  'scatter', // 散点(气泡)图
  // 'themeRiver', // 主题河流
  // 'tree', // 树图
  // 'treemap',
  /** @component 组件、工具 */
  'angleAxis', // 极坐标系的角度轴
  'axis', // 直角坐标系 grid 中的 x 轴
  'axisPointer',
  // 'brush', // 区域选择组件
  // 'calendar', // 日历坐标系组件
  'dataZoom', // 区域缩放
  'dataZoomInside', // 内置型数据区域缩放组件
  'dataZoomSelect', // 框选型数据区域缩放组件
  // 'geo', // 地理坐标系组件
  'graphic', // 原生图形元素组件
  'grid', // 直角坐标系内绘图网格
  // 'gridSimple',
  'legend', // 图例组件
  'legendScroll',
  // 'markArea',
  // 'markLine',
  'markPoint',
  // 'parallel', // 平行坐标系
  // 'parallelAxis', // 平行坐标系中的坐标轴
  'polar', // 极坐标系
  'echarts/lib/component/radar', // 雷达图坐标系组件
  'radiusAxis', // 极坐标系的径向轴
  'singleAxis', // 单轴
  'timeline', // 多个 ECharts option 间进行切换
  'title', // 标题组件,包含主标题和副标题
  // 'toolbox', // 工具栏
  'tooltip' // 提示框组件
  // 'visualMap', // 视觉映射组件
  // 'visualMapContinuous', // 连续型视觉映射
  // 'visualMapPiecewise' // 分段型视觉映射
])

// will transform to below
// import echarts from 'echarts/lib/echarts';
// import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/line';

/**
 * 实例化Echarts
 * @param {Element} element DOM 容器
 * @param {Boolean} isuseTheme 是否注册主题
 * @param {Boolean} isExpose 是否暴露echarts,部分绘图需用到echarts的方法
 * @returns {Object} {echarts: echarts对象, instance: echarts的实例化对象}
 */
const initEcharts = (element, isuseTheme = true, isExpose = false) => {
  // const echarts = await equireCharts()
  if (isExpose) {
    return {
      echarts,
      instance: isuseTheme ? (echarts.registerTheme('walden', theme), echarts.init(element, 'walden')) : echarts.init(element)
    }
  } else {
    return isuseTheme ? (echarts.registerTheme('walden', theme), echarts.init(element, 'walden')) : echarts.init(element)
  }
}

export default initEcharts

vendor/echarts/theme.json 是在echarts上下载的主题json格式文件

https://echarts.apache.org/zh/download-theme.html

1.4、使用按需引入

import initEcharts from '@/vendor/echarts'

this.chartInstance = initEcharts(this.$refs.chart)
this.chartInstance = initEcharts(document.getElementById('chart'))

// 需使用echarts方法的情况,如果渐变echarts.graphic.LinearGradient
const { echarts, instance } = initEcharts(this.$refs.chart, true, true)
this.chartInstance = instance
const option = {
  series: [
    {
      name: '渐变面积图',
      type: 'line',
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(114,222,191,.5)'
        }, {
          offset: 1,
          color: 'rgba(114,222,191,.1)'
        }])
      },
      data: []
    }
  ]
}

2、echarts v5 版本按需引入

2.1、封装按需引入方法

vendor/echarts/index.js

// 引入主题文件
import theme from './theme.js'
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表,图表后缀都为 Chart
import {
  BarChart,
  LineChart,
  PieChart
} from 'echarts/charts'
// 引入提示框,标题,直角坐标系组件,组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components'
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [
    TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent,
    BarChart, LineChart, PieChart,
    CanvasRenderer
  ]
)

/**
 * 实例化Echarts
 * @param {Element} element DOM 容器
 * @param {Boolean} isuseTheme 是否注册主题
 * @param {Boolean} isExpose 是否暴露echarts,部分绘图需用到echarts的方法
 * @returns {Object} {echarts: echarts对象, instance: echarts的实例化对象}
 */
const initEcharts = (element, isuseTheme = true, isExpose = false) => {
  if (isExpose) {
    return {
      echarts,
      instance: isuseTheme ? (echarts.registerTheme('walden', theme), echarts.init(element, 'walden')) : echarts.init(element)
    }
  } else {
    return isuseTheme ? (echarts.registerTheme('walden', theme), echarts.init(element, 'walden')) : echarts.init(element)
  }
}

export default initEcharts

vendor/echarts/theme.js

从echarts官网下载js格式的主题文件

// 部分属性(如timeline、visualMap、markPoint等)若用不到,需注释掉,否则会影响按需引入
const theme = {
  'color': [
    '#5AD8A6',
    '#5B8FF9',
    '#FF779B',
    '#7C9EDF',
    '#c4ebad',
    '#96dee8',
    '#13c2c2',
    '#0596e6',
    '#67C23A',
    '#ffa940'
  ],
  'backgroundColor': 'rgba(252,252,252,0)',
  'title': {
    'textStyle': {
      'color': '#666666'
    },
    'subtextStyle': {
      'color': '#999999'
    }
  },
  ......
}

export default theme

2.2、使用按需引入

使用方法和v4.0的一样,这里不在赘述

评论(0)

0/500

还没有评论,快来抢第一吧