@hd-fe/echarts
v0.2.11
Published
前端图表库
Downloads
9
Readme
汇电图表库说明
本图表库以简单易用为基本原则,仅对
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