ECharts图表——封装通用配置
前言
前段时间在做大屏项目,大量用到echarts图表,大屏对设计规范要求比较高,而大屏项目,经常会因为业务方面的原因、或者是数据方面的原因改动UI设计,所有图表的代码也是三天一小改、五天一大改
因此,项目里有统一的echarts图表配置,能统一所有图表的样式,修改起来也方便,如果有需要特殊设置的地方,再实例化echarts图表时覆盖通用配置或自行扩展配置即可
通用配置
封装EchartUtil工具类,方便获取通用配置,以及部分相关的方法
通用配置主要有:
统一的grid大小;
统一的title标题样式;
统一的各个系列的color;
统一的legend位置,样式;
统一的x轴、y轴、tooltip的formatter方法;
统一的series样式(例如bar、line等);
统一的文字字体、大小、颜色的设置;
formatter中,有使用到rich富文本,为了体现出效果,目前是textStyle,颜色是红色,字体大小10,在格式化时,遍历字符串,如果当前字符时数字,样式改成颜色蓝色,字体大小12
测试
下面是一个简单图表的使用过程:
0、前期准备:
1、vue项目引入echarts
2、创建指定宽高的DOM容器
1、引入工具类
import echartUtil from "@/utils/echartUtil"
import "@/assets/js/china.js"
2、初始化 echart
let echart = this.$echarts.init(document.getElementById('echart1'));
3、读取通用配置
let option = echartUtil.getEchartOption();
4、获取数据
let serieData = [];
let xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
let legendData = [
"衣服",
"裤子"
];
let metaDate = [
echartUtil.getRandomArray(7),
echartUtil.getRandomArray(7),
];
5、处理、加工数据
for (let i = 0; i < legendData.length; i++) {
let serie = echartUtil.getEchartOption().series;
if(i % 2 === 0){
serie.type = "bar";
}else{
serie.type = "line";
}
serie.name = legendData[i];
serie.data = metaDate[i];
serieData.push(serie);
}
6、个性化配置
option.tooltip.formatter = function (params) {
params["units"] = ["件","条"];
return echartUtil.getEchartOption().tooltip.formatter(params);
};
option.yAxis.name = "单位:数量";
option.xAxis.data = xAxisData;
option.legend.data = legendData;
option.series = serieData;
7、图表使用配置
echart.setOption(option);
8、绑定点击事件、并设置自动轮播
echart.on("click", function (param) {
console.log(param);
}); echartUtil.autoHover(echart);
下面的第一个图表这个简单示例的效果
效果
简单实现了一下常用的图表
后记
echarts图表,是开发中常用到的功能,正所谓好记性不如烂笔头,特此记录,以便后面再需要画echarts图表时有地方可以参考
代码开源
注:admin后端数据库文件在admin后端项目的resources/sql目录下面
代码已经开源、托管到我的GitHub、码云:
GitHub:https://github.com/huanzi-qch/fast-scaffold
码云:https://gitee.com/huanzi-qch/fast-scaffold
PS:本文的代码在前端portal项目中
ECharts图表——封装通用配置的更多相关文章
- Echarts图表常用功能配置,Demo示例
先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...
- Echarts 图表的本地配置
前言 Echarts是一个美观的可视化工具,但是很多朋友初次接触,不知道自己该怎么创建一个包含Echartst图表的本地HTML网页,本文将详细地介绍Echarts的使用流程. 使用流程步骤 共分为三 ...
- echarts图表的封装
其实echarts官网有个快速上手的教程,一般人看一遍也知道是怎么回事,先给个传送门吧--五分钟上手 引入方式多种多样就自己去官网看了--这里简单介绍echarts怎么用,下方的封装函数比较重要 1. ...
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
- angular2项目关于Echarts图表的处理
在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...
- vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
- ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- echart图表控件配置入门(二)常用图表数据动态绑定
上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...
随机推荐
- Web服务器-正则表达式-小例子(3.1.2)
@ 目录 1.邮箱 2.手机号码 关于作者 1.邮箱 import re def main(): email = input("请输入一个邮件地址:") ret = re.matc ...
- 【Git】命令思维导图
Git命令思维导图
- FLUXION参考渗透测试
1. 安装Fluxion 第一种种在终端输入git clone https://github.com/FluxionNetwork/fluxion.git(官方)第二种: 在终端输入 https:// ...
- Autofac的基本使用---1、前言
Autofac的基本使用---目录 代码地址 https://github.com/catbiscuit/AutofacStudy 参考网上的大神,原博文地址 https://www.cnblogs. ...
- 如何把 Next.js 项目部署到服务器?
Next.js 是什么? Next.js 是一个用于 生产环境的 React 框架.Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染. 支持 TypeScr ...
- 深入浅出Mybatis系列 强大的动态SQL
上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.resultMap>简单介绍了mybatis的查询,至此,CRUD都已讲完.本文将介绍mybatis ...
- ThreadLocal解决什么问题
原创文章,转载请务必将下面这段话置于文章开头处(保留超链接).本文转发自技术世界,原文链接 http://www.jasongj.com/java/threadlocal/ ThreadLocal解决 ...
- BCC和libbpf的转换
BCC和libbpf的转换 本文讲述如何将基于BCC的BPF应用转换为libbpf + BPF CO-RE.BPF CO-RE可以参见上一篇博文. 为什么是libbpf和BPF CO-RE? 历史上, ...
- 超有用的linux笔记
名词解释 根目录说明 tree -L 1 . ├── bin -> usr/bin # 英语binary的缩写,表示"二进制文件",bin目录包含了会被所有用户使用的可执行程 ...
- 算法历练之路——入学考试(JAVA)
入学考试 时间限制: 1Sec 内存限制: 128MB 提交: 42 解决: 18 题目描述辰辰是个天资聪颖的孩子,他的梦想是成为世界 上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断 ...