前言

前段时间在做大屏项目,大量用到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图表——封装通用配置的更多相关文章

  1. Echarts图表常用功能配置,Demo示例

    先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...

  2. Echarts 图表的本地配置

    前言 Echarts是一个美观的可视化工具,但是很多朋友初次接触,不知道自己该怎么创建一个包含Echartst图表的本地HTML网页,本文将详细地介绍Echarts的使用流程. 使用流程步骤 共分为三 ...

  3. 【可视化】DataV接入ECharts图表库 可视化利器强强联手

    DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...

  4. angular2项目关于Echarts图表的处理

    在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...

  5. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  6. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

  7. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  8. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  9. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  10. 基于HTML5的WebGL实现json和echarts图表展现在同一个界面

    突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...

随机推荐

  1. 话说Spring Security权限管理(源码)

    最近项目需要用到Spring Security的权限控制,故花了点时间简单的去看了一下其权限控制相关的源码(版本为4.2). AccessDecisionManager spring security ...

  2. [CareerCup] 3.7 Adopt Animal 领养动物

    3.7 An animal shelter holds only dogs and cats, and operates on a strictly "first in, first out ...

  3. Extjs Tooltip属性的使用

    要想让 tooltip生效必须:Ext.QuickTips.init();

  4. Linux基础命令---压缩与打包

    GZIP: 普通文件打包成gzip文件:gzip filename(问题:如何测试一个文件是否是gzip文件?) gzip文件解压成普通文件:gzip -d filename(副作用:原始gz文件会被 ...

  5. SUSE10的虚拟机安装以及ORACLE 11g的安装

    SUSE10虚拟机安装与ORACLE安装 作者:张欣橙 本文所需要的所有参数均位于文末附录中 一.SUSE10虚拟机的安装与创建 新建虚拟机安装 选择下一步 选择下一步 选择下一步 选择下一步 选择下 ...

  6. cocos2dx 实现gpu instancing

    所有的gpu instancing都是在unity3d上实现的,ue4实现起来应该压力也不大相关链接见下:https://www.cnblogs.com/hont/p/7143626.htmlhttp ...

  7. C++ LocalAlloc() &amp; LocalSize() &amp; LocalFree ()

    关于LocalAlloc function,参考:https://msdn.microsoft.com/en-us/library/windows/desktop/aa366723(v=vs.85). ...

  8. mysql 开发进阶篇系列 36 工具篇mysqlshow(数据库对象查看工具)

    一.概述 mysqlshow客户端查找工具,能很快地查找存在哪些数据库,数据库中的表,表中的列或索引,和mysql客户端工具很类似,不过有些特性是mysql客户端工具所不具备的. mysqlshow的 ...

  9. js的new Date()日期的使用

    <script type="text/javascript"> //js获取某个月的天数 function days(year,month){ var dayCount ...

  10. 无法连接到 OPC服务器[无此类接口支持(异常来自HRESULT:0x80004002(E_NOINTERFACE))]

    来源:https://stackoverrun.com/cn/q/10400663 无法连接到ABB Freelance OPC服务器[无此类接口支持(异常来自HRESULT:0x80004002(E ...