fx67llQuickEcharts

A tool to help you use Echarts quickly!

npm

组件阐明

  1. 这原本是一个测试如何公布Vue组件至npm库的测试项目
  2. 做完之后发现很有意思，就略微欠缺了一下成为一个繁难疾速构建Echarts图表的组件
  3. 基本上毁灭了我之前对于Echarts渲染DOM的一堆冗余代码
  4. 性能不多后续有想法的话再思考持续封装，github源码地址在底部，各位自行取用

应用步骤

  1. 装置 -> npm install fx67ll-quick-echarts --save

  2. 注册 -> main.js

    import fx67llQuickEcharts from 'fx67ll-quick-echarts'Vue.use(fx67llQuickEcharts)

  3. 应用 -> .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-chart :chartOption="option" @nodeClick="nodeClick"></quick-chart></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>

好用之处

  1. 老手能十分疾速的上手Echarts，只须要去echarts官网查找须要的option即可，三步即可应用
  2. 对于不须要过多简单操作，仅做展现的图表，能够间接应用，只须要组装好须要的option传入即可
  3. 封装了主动监听数据变动，图表大小变动主动适应，以及监听了图表点击事件，可用于相干的联动交互

不足之处

  1. 目前只有一个最根底的Echarts应用组件，对于一些简单的图表交互操作和事件监听没有封装，将来会逐渐增加
  2. 对于一些特定简单款式没有作出封装，罕用的线图柱图饼图会优先做出肯定封装，并容许增加复合的款式
  3. 目前是整体组件援用，后续会增加按需加载的反对，晋升我的项目性能

应用版本

Vue2.6 + Echarts5.1

我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文github仓库地址，为我点一颗Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！