【Echarts】从入门到自定义封装组件

一、Echarts 简介

Echarts是一款基于JavaScript的开源数据可视化图表库，提供了许多直观，个性化，可交互，可定制的数据可视化图表
- 官网链接
除开官网的案例外，这里还有几个实用的网站资源收集了很多 echarts 的图形案例
- PPChart
- Echarts Demo集

二、怎么使用Echarts

1. Echarts 的下载

从 npm 获取

npm install echarts --save

从 CDN 获取链接
可以直接从GiTHub 获取 vue-echarts

npm install echarts vue-echarts

vue-echarts 是一个第三方封装的库，他可以直接在vue项目中使用，不过用法可能和官网有一些差异，感兴趣的可以去了解一下。

2. 在 Vue 中使用 Echarts

安装 Echarts

npm install echarts --save

引入 Echarts

这里需要注意，可以全局引用，也可以按需局部引用

在 main.js 中将 echarts 全局引用，后续需要调用便可以直接 this.$echarts 来调用其上的方法

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

局部引用的话便是在每个组件中都要 import 一下

import * as echarts from 'echarts';

一个 echarts 组件的组成

首先便是得有一个接收他的容器（div），并且容器必须得有高度，不然不会显示
其次便是他的初始化操作，获取到容器的 DOM 后，调用 echarts 的 init 方法初始化图表
然后图标的相关配置都在 option 中，里面的属性很多，做的时候多去结合官网的案例去写，这里就不一一提及了
最后就是设置图标，将刚刚初始化好的值调用 setOption 方法并将 option 传入其中，便可得到一个最基础的图表了

<template><div><div ref="lineChart" style="height: 400px;"></div></div>
</template><script>
export default {name: 'lineChart',mounted() {const colors = ['#FF0000', '#5470c6', '#fac858', '#009988', '#73c0de', "#fac858", "#009988"]const myChart = this.$echarts.init(this.$refs.lineChart);const 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',itemStyle: {color: params => colors[params.dataIndex]}}]};myChart.setOption(option);}
}
</script><style scoped>
</style>

3. 小案例 – 层叠渐变柱状图

源码如下：

<template><div><div ref="lineChart3" style="height: 400px; width: 800px;"></div></div>
</template><script>
export default {name: 'LineChart3',data() {return {myChart: null,}},mounted() {this.myChart = this.$echarts.init(this.$refs.lineChart3);const option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},legend: {// 解释文本，解释series里面的namedata: ['钢铁侠', '蜘蛛侠', '绿巨人', '黑寡妇', '鹰眼', '雷神']},series: [{name: "钢铁侠",type: "bar",//柱状图stack:"Search Engine",emphasis: {//折线图的高亮状态。focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。},data: [320, 332, 301, 334, 390, 330, 320],color: {type: 'linear',x: 0, //右y: 0, //下x2: 0, //左y2: 1, //上colorStops: [{offset: 0,color: '#EEEE00' // 0% 处的颜色},{offset: 1,color: '#FF3EFF' // 100% 处的颜色}]}},{name: "蜘蛛侠",type: "bar",stack: "Search Engine",emphasis: {focus: "series",},data: [420, 232, 301, 434, 290, 230, 510],color: {type: 'linear',x: 0, //右y: 0, //下x2: 0, //左y2: 1, //上colorStops: [{offset: 0,color: '#FF7744' // 0% 处的颜色},{offset: 1,color: '#DDAA00' // 100% 处的颜色}]}},{name: "绿巨人",type: "bar",stack: "Search Engine",//数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。emphasis: {focus: "series",},data: [220, 182, 191, 234, 290, 330, 310],color: {type: 'linear',x: 0, //右y: 0, //下x2: 0, //左y2: 1, //上colorStops: [{offset: 0,color: '#11d56d' // 0% 处的颜色},{offset: 1,color: '#83bff6' // 100% 处的颜色}]}},{name: "黑寡妇",type: "bar",stack: "Search Engine",emphasis: {focus: "series",},data: [150, 232, 201, 154, 190, 330, 410],color: {type: 'linear',x: 0, //右y: 0, //下x2: 0, //左y2: 1, //上colorStops: [{offset: 0,color: '#FF7744' // 0% 处的颜色},{offset: 1,color: '#83bff6' // 100% 处的颜色}]}},{name: "鹰眼",type: "bar",stack:"Search Engine",data: [862, 1018, 964, 1026, 1679, 1600, 1570],emphasis: {focus: "series",},color: {type: 'linear',x: 0, //右y: 0, //下x2: 0, //左y2: 1, //上colorStops: [{offset: 0,color: '#FFFF77' // 0% 处的颜色},{offset: 1,color: '#FF3EFF' // 100% 处的颜色}]}},{name: "雷神",type: "bar",// barWidth: 5,//柱形宽度stack: "Search Engine",emphasis: {focus: "series",},data: [620, 732, 701, 734, 1090, 1130, 1120],color: {type: 'linear',x: 0, //右y: 0, //下x2: 0, //左y2: 1, //上colorStops: [{offset: 0,color: '#AAAAAA' // 0% 处的颜色},{offset: 1,color: '#00DDDD' // 100% 处的颜色}]}},],}this.myChart.setOption(option);},
}
</script><style scoped>
</style>

效果图：

做到这一步你已经掌握了 Echarts 的基本使用，多去熟悉熟悉各个组件的属性配置，已经可以写一些基本的组件了，但是实际的开发中，我们很少会去使用一个未经封装的组件，一般使用的都是已经封装好的，可以自定义参数和属性的自定义组件，那么下面就是教大家如何去封装一个自定义的组件

三、自定义封装 Echarts 组件

1. 为什么要封装组件

避免重复的工作量，提升复用性
使代码逻辑更加清晰，方便项目的后期维护
封装组件可以让使用者不去关心组件的内部实现以及原理，能够使一个团队更好的有层次的去运行

当今的前端开发，模块化已经成了一种普遍的方案，在各大前端框架中都会涉及的组件的封装。所以，对于现在的前端来说，怎么去封装一个组件，及封装组件的过程中，应该注意哪些东西都已经是每个前端的必备的基础技能了。

2. 怎么去封装自定义组件（饼图案例）

首先解释一下何为自定义组件：参考 Element-UI，你可以发现，他的每一个组件都会有许多的方法和属性，我们通常都会经常去使用他们自带的属性，使用非常的便捷，节省了很多的麻烦，那么我们自己当然也能也去封装这些属性，我们使用的时候，只需要在父组件中传入对应的属性即可。

展示一下部分的参数文档，参数名兄弟们可以自定义哦

基础参数和数据源 data 都是通过 props 传输，主要部分代码如下（参数有删减）

 // 初始化图标数据initChartData() {const series = [{// name: '数据',type: 'pie',    // 饼图类型// center: ['50%', '50%'],    // 中心点的位置// roseType: 'area',  // 开启玫瑰图itemStyle: {// borderRadius: 8  // 圆角值},data: this.data,     // 数据label: {overflow: 'break'   // label文字溢出换行},labelLine: {length: 6,    // 连接文字的线的长度}}];this.axisOptions.series = series;},// 图表动态参数数据初始化渲染initChart() {this.initChartData();this.axisOptions.series.forEach((e) => {// 开启玫瑰图if (this.dataProp.isRose) {e.roseType = 'area'}// 圆心位置if (this.dataProp.center) {e.center = this.dataProp.center}// 圆饼半径if (this.dataProp.radius) {e.radius = this.dataProp.radius}})// 鼠标放上去的时候显示信息if (this.dataProp.showTips) {this.axisOptions.tooltip = {trigger: 'item'};}// 限制数据个数，超出合并到其他if (this.dataProp.limit) {this.axisOptions.limit = this.dataProp.limit;const mydata = JSON.parse(JSON.stringify(this.data)); // 深拷贝避免改变原数组if (mydata.length > this.axisOptions.limit) {const showData = mydata.sort((a, b) => {return b.value - a.value}).slice(0, this.axisOptions.limit-1)// console.log('showData', showData)const others = mydata.slice(this.axisOptions.limit-1)// console.log('others', others)const otherSum = others.reduce((total, item) => total += item.value, 0)// console.log('othersSum', otherSum)showData.push({name: '其他', value: otherSum})// console.log(showData);this.axisOptions.tooltip = {trigger: 'item',formatter: function (params) {if (params.name !== '其他') return `${params.marker} ${params.name}:${params.value}`let returnValue = `${params.marker}<span style="color: ${params.color}">其他: ${otherSum}</span><br />`others.forEach((item, index, arr) => {if (index !== arr.length - 1) {returnValue += `${item.name}:${item.value}<br />`} else {returnValue += `${item.name}:${item.value}`}})return returnValue}}this.axisOptions.series.forEach((e) => {e.data = showData})}}// //额外的参数const obj = Object.assign({ ...this.axisOptions },{ ...this.extendProp });if (this.myChart) {//如果图表已经存在，只需要更新配置信息this.myChart.setOption(obj);} else {//如果不存在，则生成图表并配置信息this.myChart = echarts.init(this.$refs.lineChart);this.myChart.setOption(obj);}},},

当我们在父组件中将部分参数都传入之后

得到下面的饼图图示

手头上还有自定义旭日图、雷达图、散点图、仪表图等案例，有需要源码的可以说一声

【Echarts】从入门到自定义封装组件相关推荐

vue 自定义封装组件使用 model 选项
自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
计算机组成原理logiasim入门：关于Logisim自定义封装
关于Logisim自定义封装前言自定义封装调整矩形边框和调整引脚位置增加引脚说明填满底色修改封装名称前言你好!这是我的第一篇文档,关于logisim的一些入门问题鉴于网上查不出来,后面 ...
cmdb python 采集虚拟机_Python编程(三十四)：CMDB后台管理、封装自定义JS组件、前端td标签定制显示内容及属性...
一. CMDB后台管理 CMDB管理主要分为采集资产.API接口.后台管理.这里主要介绍CMDB后台管理. - 采集资产 - API - 后台管理- 资产列表- 业务线列表- 用户列表- 组列表... ...
Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
本章内容自定义属性快速入门外化配置自动配置自定义创建 Starter 组件摘录:读书是读完这些文字还要好好用心去想想,写书也一样,做任何事也一样图 2 第二章目录结构图第 2 章 Spr ...
vue3 | HighCharts实战自定义封装之径向条形图
1.前言目前正在做vue3的数据可视化项目,vue3的组合式api写法十分方便,可以有各种玩法,有兴趣的同学可以看我个人主页的其他文章.难点是在网上找了一圈的有关径向条形图的示例都没有好的解决方案, ...
视频教程-跟风舞烟学大数据可视化－Echarts从入门到上手实战-JavaScript
跟风舞烟学大数据可视化-Echarts从入门到上手实战网名风舞烟,中国科技大学计算机专业.微软认证讲师(MCE).微软数据分析讲师.10多年软件行业从业经验,参与过数百万的企业级ERP系统,在大数据 ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
为SSIS编写自定义数据流组件(DataFlow Component)之进阶篇:自定义编辑器
我们之前几篇讨论过自定义数据流组件的一些技术,分别如下入门篇 http://www.cnblogs.com/chenxizhang/archive/2009/06/20/1507467.html 数 ...

【Echarts】从入门到自定义封装组件

目录

一、Echarts 简介

二、怎么使用Echarts

1. Echarts 的下载

2. 在 Vue 中使用 Echarts

3. 小案例 – 层叠渐变柱状图

三、自定义封装 Echarts 组件

1. 为什么要封装组件

2. 怎么去封装自定义组件（饼图案例）

【Echarts】从入门到自定义封装组件相关推荐

最新文章

热门文章

【Echarts】 从入门到自定义封装组件

目录

一、Echarts 简介

二、怎么使用Echarts

1. Echarts 的下载

2. 在 Vue 中使用 Echarts

3. 小案例 – 层叠渐变柱状图

三、自定义封装 Echarts 组件

1. 为什么要封装组件

2. 怎么去封装自定义组件（饼图案例）

【Echarts】 从入门到自定义封装组件相关推荐

最新文章

热门文章

【Echarts】从入门到自定义封装组件

【Echarts】从入门到自定义封装组件相关推荐