ECharts封装及配置整理

1 认识ECharts

ECharts，一个基于 JavaScript 的开源可视化图表库

ECharts官网

国内Echarts使用手册网站：
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-d5b128yu.html

示例网站：
https://www.isqqw.com/
http://chart.majh.top/
https://www.ppchart.com/#/

2 为什么需要封装echarts

  • 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余
  • 在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作
  • 可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题
2.0 Echarts/mixins/resize.js
export default {mounted() {window.addEventListener('resize', this.resizeHandler)},activated() {this.resizeHandler()},methods: {resizeHandler() {if (this['myChart' + this.domId]) {this['myChart' + this.domId].resize()}}}
}
2.1 封装柱状/折线 一体图（1网格）
<!--柱状/折线 一体图（1grid）-->
<template><div:id="domId":key="domId":style="{ height: height, width: width,backgroundColor: backgroundColor }"/>
</template>
<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
import 'echarts/lib/component/dataZoom'export default {mixins: [resize],props: {domId: { type: String, default: 'chartId' },height: { type: String, default: '300px' },width: { type: String, default: '100%' },backgroundColor: { type: String, default: '#fff' },data: { type: Object, default: null }},watch: {data: {handler(val) {// 这里使用nextTick解决Error: Initialize failed: invalid domthis.$nextTick(() => {this.initChart(val)})},deep: true}},mounted() {this.initChart(this.data)},methods: {initChart(data) {if (!data) {return false}// const yAxis = this.setInterval(data.yAxis, data.series)this['myChart' + this.domId] = echarts.init(document.getElementById(this.domId))this['myChart' + this.domId].clear() // 清空画布，防止缓存this['myChart' + this.domId].setOption({grid: data.grid || {left: '10%',top: '15%',right: '10%',bottom: '25%'},toolbox: data.toolbox,axisPointer: data.axisPointer || null,title: data.title? data.title: {text: null,textStyle: {fontSize: 10,color: '#666666'},left: '5%'},legend: data.legend? data.legend: {data: data.legendData,top: 0,textStyle: {fontSize: 9,color: '#666666'},formatter: function(name) {return name.length > 12 ? name.substr(0, 12) + '...' : name}},tooltip: data.tooltip? data.tooltip: {trigger: 'axis'},xAxis: data.xAxis,// yAxis: yAxis,yAxis: data.yAxis,dataZoom: data.dataZoom,visualMap: data.visualMap,series: data.series})}// 根据data来判断y轴的间隔// setInterval(yAxis, series) {//   let types = new Set()//   series.forEach((el) => {//     types.add(el.type)//   })//   types = Array.from(types)//   const maxArray = []//   const minArray = []//   types.forEach((m) => {//     let data = []//     series.forEach((n) => {//       if (m === n.type) {//         data = [...data, ...n.data]//       }//     })//     let max = Math.max(...data)//     const min = Math.min(...data)//     if (max > 0) {//       max = parseInt(Math.ceil(max))//     } else {//       max = parseInt(Math.floor(max))//     }//     if (max.toString().length === 1) {//       // 个位数//       if (max > 5) {//         max = 10//       }//       // else {//       //   max = 5//       // }//     } else if (max < 1) {//       max = 1//     } else {//       // 两位以上//       let first = ('' + max)[0]//       const second = ('' + max)[1]//       if (second > 5) {//         first = parseInt(first) + 1//         for (let i = 0; i < max.toString().length - 1; i++) {//           first = first + '0'//         }//       } else {//         first = first + '5'//         for (let i = 0; i < max.toString().length - 2; i++) {//           first = first + '0'//         }//       }//       max = parseInt(first)//     }//     maxArray.push(max)//     minArray.push(min)//   })//   yAxis.map((v, i) => {//     v.max = Math.ceil(maxArray[i]) // 向上取整//     v.min = Math.floor(minArray[i]) // 向下取整//     if (v.min > 0) {//       v.min = 0//     }//     if (v.max < 0) {//       v.max = 0//     }//     v.interval = (v.max - v.min) / 5//   })//   return yAxis// }}
}
</script>
2.2 封装饼图
<!--饼图-->
<template><div :id="domId" :key="domId" :style="{ height: height, width: '100%',backgroundColor:'#fff' }" />
</template>
<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
import 'echarts/lib/component/dataZoom'export default {mixins: [resize],props: {domId: { type: String, default: 'chartId' },height: { type: String, default: '300px' },data: { type: Object, default: null }},watch: {data: {handler(val) {// 这里使用nextTick解决Error: Initialize failed: invalid domthis.$nextTick(() => {this.initChart(val)})},deep: true}},mounted() {this.initChart(this.data)},methods: {initChart(data) {if (!data) {return false}const that = thisthis['myChart' + this.domId] = echarts.init(document.getElementById(this.domId))this['myChart' + this.domId].setOption({grid: {left: '10%',top: '15%',right: '10%',bottom: '25%'},toolbox: data.toolbox,title: {text: data.title ? data.title : null,textStyle: {fontSize: 10,color: '#666666'},left: '5%'},legend: data.legend ? data.legend : {data: data.legendData,top: 0,textStyle: {fontSize: 9,color: '#666666'},formatter: (name) => {if (!name) return ''return that.getEqualNewlineString(name, 10) // 根据需求修改参数}},tooltip: data.tooltip ? data.tooltip : {trigger: 'axis'},series: data.series})},/*** 超出换行的方法* @param {String} params 要处理的字符串* @param {Number} length 每行显示长度* @returns {String}*/getEqualNewlineString(params, length) {let text = ''const count = Math.ceil(params.length / length) // 向上取整数// 一行展示length个if (count > 1) {for (let z = 1; z <= count; z++) {text += params.substr((z - 1) * length, length)if (z < count) {text += '\n'}}} else {text += params.substr(0, length)}return text}}
}
</script>
2.3柱状/折线 一体图（2网格）
<!--柱状/折线 一体图（2grid）-->
<template><div :id="domId" :key="domId" :style="{ height: height, width: '100%',backgroundColor:'#fff' }" />
</template>
<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
import 'echarts/lib/component/dataZoom'export default {mixins: [resize],props: {domId: { type: String, default: 'chartId' },height: { type: String, default: '300px' },data: { type: Object, default: null }},watch: {data: {handler(val) {// 这里使用nextTick解决Error: Initialize failed: invalid domthis.$nextTick(() => {this.initChart(val)})},deep: true}},mounted() {this.initChart(this.data)},methods: {initChart(data) {if (!data) {return false}this['myChart' + this.domId] = echarts.init(document.getElementById(this.domId))this['myChart' + this.domId].clear() // 清空画布，防止缓存this['myChart' + this.domId].setOption({grid: data.grid? data.grid: [{left: '10%',top: '15%',right: '10%',height: '35%'},{left: '10%',top: '50%',right: '10%',height: '35%'}],toolbox: data.toolbox,title: {text: data.title ? data.title : null,textStyle: {fontSize: 10,color: '#666666'},left: '5%'},legend: data.legend? data.legend: {data: data.legendData,top: 0,textStyle: {fontSize: 9,color: '#666666'},formatter: function(name) {return name.length > 12 ? name.substr(0, 12) + '...' : name}},tooltip: data.tooltip? data.tooltip: {trigger: 'axis'},xAxis: data.xAxis,yAxis: data.yAxis,dataZoom: data.dataZoom,series: data.series})}}
}
</script>

3 ECharts配置整理

例子参考

热力图参考例子：https://www.isqqw.com/viewer?id=31895

x轴 / y轴
xAxis: {show: true, // 是否显示x轴type: 'category', // 坐标轴类型，值category(类目轴)/value(数值轴)，与y轴呼应，若x轴配置category则y轴配置valueinverse: false, // 是否是反向坐标轴boundaryGap: ['20%', '20%'],    // 坐标轴两边留白策略，也可以使用布尔值，默认true居中axisLine: {show: true,    // 是否显示坐标轴轴线},axisTick: {show: true,    // 是否显示坐标轴刻度alignWithLabel: true,   //设置x轴刻度线与x轴文字对齐的},axisLabel: {show: true,     // 是否显示刻度标签interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有rotate: 90,   // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度margin: 10,    // 刻度标签与轴线之间的距离// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式formatter: function (params) {// 横坐标超长处理let newParamsName = ''const paramsNameNumber = params.lengthconst provideNumber = 15const rowNumber = Math.ceil(paramsNameNumber / provideNumber)if (paramsNameNumber > provideNumber) {for (let p = 0; p < rowNumber; p++) {let tempStr = ''const start = p * provideNumberconst end = start + provideNumberif (p == rowNumber - 1) {tempStr = params.substring(start, paramsNameNumber)} else {tempStr = params.substring(start, end) + '\n'}newParamsName += tempStr}} else {newParamsName = params}return newParamsName},color: '#FFF',     // 刻度标签文字的颜色fontStyle: 'normal',    // 字体的风格（normal无样式；italic斜体；oblique倾斜字体） // 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）fontWeight: 'normal',    fontSize: '20',    // 文字字体大小align: 'left',     // 文字水平对齐方式，默认自动（left/center/right）verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（top/middle/bottom)lineHeight: '50',    // 行高backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)},splitLine: {show: false // 是否显示网格线}
},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/234532.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Docker】以service形式离线安装卸载的docker、compose服务

【Docker】以service形式离线安装卸载的docker、compose服务

CentOS7离线卸载Docker步骤 移除开机自启 [rootCenOS-1 system]# systemctl disable docker移除注册文件 rm -rf /etc/systemd/system/docker.service删除相关安装目录 rm -rf $(find / -name docker)CentOS7离线安装Docker、Compose步骤 资源地址&#xff1a;docker_20.10…
阅读更多...
《数据结构、算法与应用C++语言描述》- 最小输者树模板的C++实现

《数据结构、算法与应用C++语言描述》- 最小输者树模板的C++实现

输者树 完整可编译运行代码见&#xff1a;Github::Data-Structures-Algorithms-and-Applications/_31loserTree 输者树&#xff1a;每一个内部节点所记录的都是比赛的输者&#xff0c;晋级的节点记录在边上。本文中&#xff0c;赢者是分数较低的那个&#xff0c;输者是分数高…
阅读更多...
虾皮电商申请：一站式开店指南

虾皮电商申请：一站式开店指南

随着跨境电商的快速发展&#xff0c;越来越多的商家开始意识到东南亚市场的潜力。虾皮电商&#xff08;Shopee&#xff09;作为东南亚地区最大的电商平台之一&#xff0c;为商家提供了一个开拓市场的机会。本文将详细介绍如何在虾皮电商平台上开店&#xff0c;并给出一些建议来…
阅读更多...
STM32/STM8资源节约主义编程方式

STM32/STM8资源节约主义编程方式

STM32/STM8资源节约主义编程方式 在小资源芯片进行代码设计时&#xff0c;如STM32C0系列&#xff0c;STM8系列&#xff0c;因为官方库本身要包含各种场景应用特征的支持&#xff0c;所以会有一些冗余的代码占用更多FLASH空间。当需要实现资源占用最简化设计方式时&#xff0c;…
阅读更多...
记一次gunicorn启动报错

记一次gunicorn启动报错

问题&#xff1a; 使用 gunicorn -w 1 -b 0.0.0.0:5005 main:app 启动时报错 gunicorn: error: unrecognized arguments: -w 1 -b 0.0.0.0:5005 main:app 原因&#xff1a; 是由于代码中包含 args parser.parse_args()会将gunicorn 的启动参数当作输入。 修改为&#xf…
阅读更多...
4、ollvm移植到ndk中

4、ollvm移植到ndk中

准备ndk&#xff1a; android-ndk-r21b-linux-x86_64 git checkout ollvm-Obfuscation 将编译好的ollvm中的bin include lib三个文件夹放到ndk中的android-ndk-r21b-linux-x86_64/android-ndk-r21b/toolchains/llvm/prebuilt/linux-x86_64目录中&#xff0c;进行替换 确认cl…
阅读更多...
uniapp 导入ucharts图表插件 H5项目， 使用echarts eopts配置

uniapp 导入ucharts图表插件 H5项目， 使用echarts eopts配置

先下载ucharts H5示例源码&#xff1a; uCharts: 高性能跨平台图表库&#xff0c;支持H5、APP、小程序&#xff08;微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序&#xff09;、Vue、Taro等更多支持canvas的框架平台&#…
阅读更多...
如何在公网环境下使用Potplayer访问本地群晖webdav中的影视资源

如何在公网环境下使用Potplayer访问本地群晖webdav中的影视资源

文章目录 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是&#xff1a;1 使用环境要求&#xff1a;2 配置webdav3 测试局域网使用potplayer访问webdav3 内网穿透&#xff0c;映射至公网4 使用固定地址在potplayer访问webdav ​ 国内流媒体平台的内…
阅读更多...
读写锁ReentrantReadWriteLockStampLock详解与实践实例

读写锁ReentrantReadWriteLockStampLock详解与实践实例

读读不存在线程安全问题。写读&#xff0c;写写操作存在线程安全问题的 现实中有这样一种场景&#xff1a;对共享资源有读和写的操作&#xff0c;且写操作没有读操作那么频繁&#xff08;读多写少&#xff09;。在没有写操作的时候&#xff0c;多个线程同时读一个资源没有任何…
阅读更多...
硬件基础与实施运维工程师的介绍

硬件基础与实施运维工程师的介绍

目录 一、实施与运维 1.2 实施运维一般做什么 1.1.1实施工程师 1.1.2运维工程师 1.3 实施运维需要具备哪些技能 三、基础硬件 四、操作系统 4.1 Windows 4.2 Linux 4.3 macOS 4.4 Unix 五、总结 一、实施与运维 1.1 实施运维是干什么的 1、运维工程师负责服务的稳…
阅读更多...
第二周：AI产品经理全局学习

第二周：AI产品经理全局学习

一、AI产品架构全景 二、 AI产品岗位分析和了解 三、 AI产品能力模型 四、AI产品经理工作流 五、AI产品经理学习路径和规划 六、本周市场动态
阅读更多...
力扣 面试经典150算法题

力扣 面试经典150算法题

1合并两个有序数组88. 合并两个有序数组-CSDN博客简单23
阅读更多...
如何在Ubuntu系统中安装VNC并结合内网穿透实现远程访问桌面

如何在Ubuntu系统中安装VNC并结合内网穿透实现远程访问桌面

文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…
阅读更多...
相机基础概念介绍

相机基础概念介绍

一.概念 Camera的成像原理 景物通过镜头&#xff08;LENS&#xff09;生成的光学图像投射到图像传感器(Sensor)表面上&#xff0c;然后转为模拟的电信号&#xff0c;经过 A/D&#xff08;模数转换&#xff09;转换后变为数字图像信号&#xff0c;再送到数字信号处理芯片&…
阅读更多...
去掉乘法运算的加法移位神经网络架构

去掉乘法运算的加法移位神经网络架构

[CVPR 2020] AdderNet: Do We Really Need Multiplications in Deep Learning? 代码&#xff1a;https://github.com/huawei-noah/AdderNet/tree/master 核心贡献 用filter与input feature之间的L1-范数距离作为“卷积层”的输出为了提升模型性能&#xff0c;提出全精度梯度…
阅读更多...
水平居中、垂直居中、水平垂直居中

水平居中、垂直居中、水平垂直居中

1.水平居中 1.1块级元素 text-align:center; 1.2块级元素 注意&#xff1a;需要给标签指定宽度 margin:0 auto; 1.3绝对定位 和 自我位移 position:absolute; left:50%; transform:translateX(-50%); 注意&#xff1a;使用绝对定位会使元素脱离文档流 1.4flex布局 d…
阅读更多...
速通数据结构顺序表代码题

速通数据结构顺序表代码题

顺序表 顺序表递增有序&#xff0c;插入元素x&#xff0c;仍递增有序用顺序表最后一个元素覆盖整个顺序表中最小元素&#xff0c;并返回该最小元素将顺序表的元素逆置将a1,a2,a3……am b1,b2,b3……bn转换成b1,b2,b3……bn a1,a2,a3……am删除顺序表中所有值为x的元素从顺序表中…
阅读更多...
【六大排序详解】开篇 ：插入排序 与 希尔排序

【六大排序详解】开篇 ：插入排序 与 希尔排序

插入排序 与 希尔排序 六大排序之二 插入排序 与 希尔排序1 排序1.1排序的概念 2 插入排序2.1 插入排序原理2.2 排序步骤2.3 代码实现 3 希尔排序3.1 希尔排序原理3.2 排序步骤3.3 代码实现 4 时间复杂度分析 Thanks♪(&#xff65;ω&#xff65;)&#xff89;下一篇文章见&am…
阅读更多...
HIve安装配置（超详细）

HIve安装配置（超详细）

文章目录 Hive安装配置一、Hive安装地址二、Hive安装部署1. 把 apache-hive-3.1.2-bin.tar.gz上传到Linux的/export/software目录下2. 解压apache-hive-3.1.2-bin.tar.gz到/export/servers/目录下面3. 修改apache-hive-3.1.2-bin.tar.gz的名称为hive4. 修改/etc/profile&#x…
阅读更多...
[python]pandas

[python]pandas

主要内容涉及&#xff1a;读取数据和保存数据、数据详情信息、数据处理、数据切片、筛选、排序、分组、统计、表格样式 import pandas as pd import numpy as np读取数据和保存数据 # 2.1 从CSV文件读取数据,编码gbk pd.read_csv(filename, encodinggbk)# 2.2 读取前6行,当数…
阅读更多...
最新文章

Copyright @ 2022~2023