fx67llQuickEcharts一款助你快速使用Echarts的工具！npm组件说明这本来是一个测试项目，用来测试如何将Vue组件发布到npm库中。做完测试项目后，觉得很有意思。稍作改进，成为构建Echarts图表的简单快速组件。基本上去掉了我之前关于Echarts渲染DOM的一堆冗余代码。功能不多。如果你有什么想法，那就考虑继续打包。github源码地址在最下面，大家可以自行使用使用步骤安装->npminstallfx67ll-quick-echarts--saveregistration->main.jsimportfx67llQuickEchartsfrom'fx67ll-quick-echarts'Vue.use(fx67llQuickEcharts)use->.vue，可以在Echarts官网查看相关选项Configuration//propertychartOption：Echarts选项图表配置项//event@nodeClick：图表中节点的点击事件，返回值chartParams的具体信息当前节点//事件@nodeClick:如果没有节点被点击，返回值为null，可以用来判断是否点击了空白处。//methodsetHLByDataIndex(dataIndex):指定高亮图表节点的方法，入参dataIndex需要高亮节点下标或下标数组，number/number[]//methodsetDPByDataIndex(dataIndex):指定取消高亮的方法图表节点。传入参数dataIndex，需要取消的节点的下标或下标数组，number/number[]方法{this.$refs.qe.setHLByDataIndex([0,1]);这个.$refs.qe.setDPByDataIndex([0,1]);}//返回值chartParams各个属性的详细说明{//当前点击的图形元素所属的组件名称，//其值为如'series','markLine','markPoint','timeLine'等componentType:string,//系列类型。可能的值有：'line'、'bar'、'pie'等。componentType为'series'时有意义。seriesType:string,//传入的option.series中系列的索引。当componentType为'series'时有意义。seriesIndex:number,//系列名称。当componentType为'series'时有意义。seriesName:string,//数据名称，类别名称name:string,//传入数据数组中数据的索引dataIndex:number,//传入原始数据项data:Object,//sankey,graph等图表包含nodeData和edgeData。//dataType的值为'node'或'edge'，表示当前点击是在节点还是边上。//其他图表大多只有一种数据，dataType无意义。dataType:string,//传入的数据值value:number|Array,//数据图的颜色。当componentType为'series'时有意义。color:string,//用户定义的数据。仅在图形组件和自定义系列（customseries）中有效，如果设置节点定义如：{type:'circle',info:{some:123}}。info:*}简单示例实用功能新手可以非常快速的上手Echarts，只需到echarts官网找到自己需要的选项，三步即可使用。对于不需要太多复杂操作的，直接show图表就可以直接使用，只需要组装需要的option传入包即可自动监听数据变化，自动适配图表大小变化，监听点击图表事件，可用于关联联动交互。目前只有一个不足最基本的Echarts使用组件。没有封装一些复杂的图表交互操作和事件监听。以后会逐步加入一些具体的复杂样式。对于一些特定的复杂样式没有封装。常用的折线图、柱状图、饼图都会优先进行一定的封装，允许添加复合的。该样式目前为整体组件参考，后续会加入对按需加载的支持，以提升项目性能。我使用的版本是Vue2.6+Echarts5.1。我是fx67ll.com。如果您发现本文有任何错误，请在评论区讨论和指正，谢谢您的阅读！如果您喜欢本文，欢迎访问我本文的github仓库地址，并为我点个Star，谢谢~:)转发请注明参考文章地址，万分感谢！！！
