eCharts存在问题

配置eCharts的option,对于大部分的开发者来说,复杂情况下是一件繁琐的事情。为什么繁琐,大致有以下这些原因

  • 大小写敏感:在没有IDE的智能提示下,很容易写错,而且即使写错,eCharts不会报错,问题难以排查
  • 阶层结构复杂:在复杂情况下,使用json手工编写配置,有一些属性在阶层结构中的位置,可能会搞错,同样的一个color属性,有些是在root下面的,有些是在series下面的
  • 属性的类型:有些属性支持字符串,有些支持数字数组,有些兼容多种类型

OptionCreator需要解决的问题

配色

一般来说,偏工程的程序员不注意配色,字体等问题,所以代码中会持续收集一些好的配色,可以直接使用

    /**配色表 6种 百度 */
public static colorlist_6_Baidu = ["#60acfc", "#32d3eb", "#5bc49f", "#feb64d", "#ff7c7c", "#9287e7"];

对于渐变色也准备了渐变色生成函数

    /**渐变色
* @param direction - 方向
* @param startcolor - 开始颜色
* @param endcolor - 结束颜色
* @returns 渐变色
*/
public static geLinearGradient(direction: Direction, startcolor: string = '#c86589', endcolor: string = '#06a7ff'): any {

简单图形快速生成

上面的极坐标的代码可以很快生成,同时对于生成的图形,可以通过传统的属性设定的方式进行自定义的修改

import { OnInit, Component } from '@angular/core';
import { PolarOption } from '../OptionCreator/PolarOption';
import { ChartColor } from '../OptionCreator/ChartColor'
import { CommonFunction } from '../common';
@Component({
templateUrl: './polar_basic.component.html'
})
export class Polar_BasicComponent implements OnInit {
title = '极坐标-基本';
dataset = [
{ value: 50, name: '唐三' },
{ value: 100, name: '戴沐白' },
{ value: 150, name: '马红俊' },
{ value: 70, name: '奥斯卡' },
{ value: 80, name: '小舞' },
{ value: 120, name: '宁荣荣' },
{ value: 90, name: '朱竹清' },
];
Sample = PolarOption.CreatePolar(CommonFunction.clone(this.dataset), "75%"); ngOnInit(): void {
this.Sample.series[0].itemStyle.color = this.getColor;
this.Sample.series[0].itemStyle.opacity = 0.5;
this.Sample.series[0].emphasis.itemStyle.opacity = 1;
} getColor(params) {
//定义一个颜色集合
var colorList = ChartColor.colorlist_7_Baidu;
//对每个bar显示一种颜色
return colorList[params.dataIndex]
}
}

OptionHelper

工具位置了一些有用的函数,例如可以通过简单的方法为图表添加一个VisualMap

  /**
* 添加VisualMap
* @param option 需要添加的图表配置
* @param max VisualMap最大值
* @param colorlist inRange颜色列表
*/
public static chart_SetVisualMap(option: OptionBase, max: number, colorlist: string[]) { OptionHelper.chart_SetVisualMap(this.Sample, 200, ChartColor.colorlist_VisualMapinRange);

上图的复杂3DBar的代码如下,非常简单,大部分代码是准备数据,以及Angular的代码,生成图表和添加VisualMap,调整细节代码就5行左右。

import { OnInit, Component } from '@angular/core';
import { Bar3D } from '../OptionCreator/Bar3D';
import { ChartComponent } from '../Chart/chart.component';
import { Chart3D } from '../OptionCreator/OptionBase';
import { OptionHelper } from '../OptionCreator/OptionHelper';
import { ChartColor } from '../OptionCreator/ChartColor';
@Component({
templateUrl: './bar3d_basic.component.html'
})
export class Bar3D_BasicComponent implements OnInit {
chartComp = ChartComponent;
title = '柱状图(3D)-基本';
categoryX = ['唐三', '戴沐白', "马红俊", "奥斯卡", "小舞", "宁荣荣", "朱竹清"];
categoryY = ['攻击', '防御', "生命", "魂力", "速度"];
Sample: Chart3D
ngOnInit(): void {
let dataset: number[][] = [];
for (let roleind = 0; roleind < this.categoryX.length; roleind++) {
for (let proidx = 0; proidx < this.categoryY.length; proidx++) {
dataset.push([roleind, proidx, Math.round(Math.random() * 100)])
}
}
this.Sample = Bar3D.CreateBar3D(this.categoryX, this.categoryY, "角色", "能力", "数值", dataset);
this.Sample.series[0].emphasis.label.formatter = this.LabelForPoint;
this.Sample.series[0].itemStyle.opacity = 0.5;
this.Sample.tooltip = null;
OptionHelper.chart_SetVisualMap(this.Sample, 100, ChartColor.colorlist_VisualMapinRange_More);
}
LabelForPoint(params: any) {
let categoryX = ['唐三', '戴沐白', "马红俊", "奥斯卡", "小舞", "宁荣荣", "朱竹清"];
let categoryY = ['攻击', '防御', "生命", "魂力", "速度"];
return "角色:" + categoryX[params.data[0]] + "" + "\n属性:" + categoryY[params.data[1]] + "\n数值:" + params.data[2];
};
}

Demo:http://datavisualization.club:8081/basic/bar

Github:https://github.com/magicdict/VisLab

代码持续更新中,以前几个获奖的可视化(天池,CCF)代码中好的设计也会整合到这个开源项目中。

对于大数据可视化感兴趣的,本人的公众号可以关注一下。

以后需要参加数据可视化比赛,可以组队。

[开源]eCharts配置简化包OptionCreator[typescript版]的更多相关文章

  1. [开源][示例更新]eCharts配置简化包OptionCreator[typescript版]

    前言 eCharts作为国内优秀的开源图表工具,功能强大,但是使用中也存在一定的问题. 文档更新较慢,文档说明不详细. 前端使用的弱类型语言,数据结构在灵活的同时,也容易造成一些问题.例如某些属性到底 ...

  2. 配置算法(第4版)的Java编译环境

    1. 下载 1.1 JDK http://www.oracle.com/technetwork/java/javase/downloads/index.html选择“Windows x64 180.5 ...

  3. 转:基于开源项目OpenCV的人脸识别Demo版整理(不仅可以识别人脸,还可以识别眼睛鼻子嘴等)【模式识别中的翘楚】

    文章来自于:http://blog.renren.com/share/246648717/8171467499 基于开源项目OpenCV的人脸识别Demo版整理(不仅可以识别人脸,还可以识别眼睛鼻子嘴 ...

  4. 在Eclipse下配置算法(第四版)运行环境

    第一步:配置Eclipse运行环境 Eclipse运行环境配置过程是很简单的,用过Eclipse进行java开发或学习的同学应该都很熟悉这个过程了. 配置过程: (1)系统环境:Windows7 64 ...

  5. 三、Gradle初级教程——Gradle除了签名打包还能配置jar包

    1.gradle概念 构建工具,Groovy,Java. 2.gradle配置jar包,和libs文件夹导入jar包的区别 到此,还是这种方法导入JAR包比较方便.每次更新JAR包,只需要修改版本号就 ...

  6. 【手把手学习flutter】Flutter打Android包的基本配置和包体积优化策略

    [手把手学习flutter]Flutter打Android包的基本配置和包体积优化策略 关注「松宝写代码」,回复"加群" 加入我们一起学习,天天向上 前言 因为最近参加2020FE ...

  7. spring mvc和spring配置扫描包问题

    spring mvc和spring俩配置文件,其中都要配置扫描包. <context:component-scan base-package="com.controller" ...

  8. Python基于Flask框架配置依赖包信息的项目迁移部署小技巧

    一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...

  9. 简单安装与配置mysql数据库(绿色版)

    目录 绿色版下载 mysql绿色版(5.7版本的安装与配置) 绿色版下载: mysql官网下载地址:https://www.oracle.com/index.html mysql绿色版(5.7版本的安 ...

随机推荐

  1. Java实现指定年份月份的日历表

    输入指定的年份与月份,看这个月的日历表 package Xueying_Liu; import java.util.Scanner; public class rilibiao { public st ...

  2. java实现第五届蓝桥杯猜字母

    猜字母 题目描述 把abcd-s共19个字母组成的序列重复拼接106次,得到长度为2014的串. 接下来删除第1个字母(即开头的字母a),以及第3个,第5个等所有奇数位置的字母. 得到的新串再进行删除 ...

  3. PAT 到底买不买

    小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要的珠子?如果是,那么告诉她有多少多余的珠子 ...

  4. 快速幂解法--x^n

    class Solution{ public: double myPow(double x,int n){ if(==x || n==) return ; if(n == ) return x; if ...

  5. 制作seata docker镜像

    seata是阿里巴巴的一款开源的分布式事务框架,官方已经支持docker了,但是因为业务的需要,需要自己定制. 制作docker镜像 官方的Dockerfile.下载seata-server-1.1. ...

  6. CSS中的float和margin的混合使用

    在最近的学习中,在GitHub上找了一些布局练习,我发现了我自己对布局超级不熟悉(很难受). 在以前的学习中,感觉使用CSS就记住各个属性的功能就OK了,但是呢?真的很打脸.不说了,太伤心了,进入正题 ...

  7. 关于领域驱动设计 DDD(Domain-Driven Design)

    以下旨在 理解DDD. 1.     什么是领域? 妈妈好是做母婴新零售的产品,应该属于电商平台,那么电商平台就是一个领域. 同一个领域的系统都有相同的核心业务. eg: 电商领域都有:商品浏览.购物 ...

  8. curlPost和curlGet 请求链接

    //getcurl get读取数据function curlGet($url){ $UserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) App ...

  9. EIGRP-15-其他和高级的EIGRP特性-1-路由器ID

    与很多协议一样, EIGRP也使用了路由器ID (RTD)的概念,用一个4字节的编号来标识某个路由器实例.每个地址家族实例拥有自已独立的RID.工程师可以在一台路由器上,为多个EIGRP进程和地址家族 ...

  10. 基于session对象实现简单的购物车应用

    大部分购物网站都会实现购物车的功能,基于session对象的购物车应用可以实现一个用户会话有效期内,用户所选多个商品的存储. 为了实现这样的功能需要编写三个JSP页面,分别是login.jsp.mai ...