fx67llQuickEcharts
A tool to help you use Echarts quickly!
组件说明
- 这本来是一个测试如何发布Vue组件至npm库的测试项目
- 做完之后发现很有意思,就稍微完善了一下成为一个简易快速构建Echarts图表的组件
- 基本上消灭了我之前关于Echarts渲染DOM的一堆冗余代码
- 功能不多后续有想法的话再考虑继续封装,github源码地址在底部,各位自行取用
使用步骤
- 安装 ->
npm install fx67ll-quick-echarts --save
- 注册 ->
main.js
import fx67llQuickEcharts from 'fx67ll-quick-echarts'
Vue.use(fx67llQuickEcharts)
- 使用 ->
.vue
,可在 Echarts官网 查询相关option配置
// 属性 chartOption: Echarts option 图表配置项
// 事件 @nodeClick: 图表中节点的点击事件,返回值 chartParams 当前节点的具体信息
// 事件 @nodeClick: 如果没有点击到节点,返回值为null,可以用来判断是否点击到空白处了
// 方法 setHLByDataIndex(dataIndex):指定图表节点高亮的方法,传入参数 dataIndex 需要高亮的节点下标或下标数组,number/number[]
// 方法 setDPByDataIndex(dataIndex):指定图表节点取消高亮的方法,传入参数 dataIndex 需要取消高亮的节点下标或下标数组,number/number[]
<quick-echarts ref="qe" :chartOption="chartOption" @nodeClick="nodeClick"></quick-echarts>
methods{
this.$refs.qe.setHLByDataIndex([0, 1]);
this.$refs.qe.setDPByDataIndex([0, 1]);
}
// 返回值 chartParams 的各项属性详细说明
{
// 当前点击的图形元素所属的组件名称,
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
seriesType: string,
// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesIndex: number,
// 系列名称。当 componentType 为 'series' 时有意义。
seriesName: string,
// 数据名,类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
// dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
// 其他大部分图表中只有一种 data,dataType 无意义。
dataType: string,
// 传入的数据值
value: number|Array,
// 数据图形的颜色。当 componentType 为 'series' 时有意义。
color: string,
// 用户自定义的数据。只在 graphic component 和自定义系列(custom series)
// 中生效,如果节点定义上设置了如:{type: 'circle', info: {some: 123}}。
info: *
}
简易示例
<template>
<quick-echarts :chartOption="option" @nodeClick="nodeClick"></quick-echarts>
</template>
<script>
export default {
data() {
return {
option: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
};
},
methods: {
nodeClick(chartParams) {
console.log(chartParams);
}
}
};
</script>
我是 fx67ll.com,如果您发现本组件有什么错误,欢迎在评论区讨论指正,感谢您的阅读!
如果您喜欢这个组件,欢迎访问 本组件github仓库地址,为我点一颗Star,Thanks~ :)
转发请注明参考地址,非常感谢!!!
好用之处
- 新手能非常快速的上手Echarts,只需要去echarts官网查找需要的option即可,三步即可使用
- 对于不需要过多复杂操作,仅做展示的图表,可以直接使用,只需要组装好需要的option传入即可
- 封装了自动监听数据变化,图表大小变化自动适应,以及监听了图表点击事件,可用于相关的联动交互
不足之处
- 目前只有一个最基础的Echarts使用组件,对于一些复杂的图表交互操作和事件监听没有封装,未来会逐步添加
- 对于一些特定复杂样式没有作出封装,常用的线图柱图饼图会优先做出一定封装,并允许添加复合的样式
- 目前是整体组件引用,后续会添加按需加载的支持,提升项目性能
使用版本
Vue2.6 + Echarts5.1
我是 fx67ll.com,如果您发现本文有什么错误,欢迎在评论区讨论指正,感谢您的阅读!
如果您喜欢这篇文章,欢迎访问我的 本文github仓库地址,为我点一颗Star,Thanks~ :)
转发请注明参考文章地址,非常感谢!!!
0.1.10.20221019
- fix doc bug
0.1.9.20211208
- delete useless ttf
0.1.8.20211028
- fix code type
0.1.7.20211027
- add blog title -- '基于Vue简易封装的快速构建Echarts组件 -- fx67llQuickEcharts'
- add more description
0.1.6.20210607
- add setHLByDataIndex(dataIndex) for action highlight
- add setDPByDataIndex(dataIndex) for action downplay
0.1.5.20210425
- clear index.vue for fix bugs
0.1.4.20210424
- add @nodeclick(chartParams)
0.1.3.20210423
- delete 'empty data'
0.1.2.20210422
- watch props -> chartOption
0.1.1.20210421
- change nodename base-echarts -> quick-echarts
0.1.0.20210421
- finish baseEcharts single version
- copy the option from 'echarts'