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~ :)
转发请注明参考文章地址，非常感谢！！！