@hd-fe/echarts

汇电图表库说明

本图表库以简单易用为基本原则，仅对 echarts 常用图表和配置进行了简单封装。所有配置格式与 echarts 官网一致。

主要功能

• 主题定制，统一全局图表样式

• 封装常用图表类型和配置属性

使用

完整引入

  // main.js
  import Vue from 'vue'
  import HdECharts from '@hd-fe/echarts'
  import App from './App.vue'

  Vue.use(HdECharts)

  new Vue({
    el: '#app',
    render: h => h(App)
  })

按需引入

  import Vue from 'vue'
  import { HdLine } from '@hd-fe/echarts'
  import App from './App.vue'

  Vue.use(HdLine)

  new Vue({
    el: '#app',
    render: h => h(App)
  })

主题定制

完整引入时

  ...
  import HdECharts from '@hd-fe/echarts'
  import theme from './theme.json'

  Vue.use(HdECharts, { theme })

themm.json 文件可参考 主题编辑器 导出，与 官网配置项 配置基本一致

按需引入时

  ...
  import { HdLine, HdBar } from '@hd-fe/echarts'
  import theme from './theme.json'

  Vue.use(HdLine, { theme })  // theme是全局设置，只需要设置一次
  Vue.use(HdBar)  // HdLine已设置theme，HdBar可不再配置

封装的图表类型

折线

柱状

饼状

雷达图

拆线-柱状

其他

可配置的属性

• title: Object 配置格式与 echarts 官网配置 options 下的 title 相同
• legend: Object 配置格式与 echarts 官网配置 options 下的 legend 相同
• tooltip: Object 配置格式与 echarts 官网配置 options 下的 tooltip 相同
• xAxis: Object 配置格式与 echarts 官网配置 options 下的 xAxis 相同
• yAxis: Object 配置格式与 echarts 官网配置 options 下的 yAxis 相同
• series: Array 配置格式与 echarts 官网配置 options 下的 series 相同
• options: Object 配置格式与 echarts 官网配置 options 相同
• watchShallow: Boolean 对 options 值进行浅监听并触发图表更新，默认值 true ，如果需要进行 options 值的深监听，可设置 false
• autoresize: Boolean 浏览器窗口大小改变时自适应，默认值 true 可设置 false