[開源]eCharts配置簡化包OptionCreator[typescript版]
阿新 • • 發佈：2020-07-03
## eCharts存在問題
配置eCharts的option，對於大部分的開發者來說，複雜情況下是一件繁瑣的事情。為什麼繁瑣，大致有以下這些原因
- 大小寫敏感：在沒有IDE的智慧提示下，很容易寫錯，而且即使寫錯，eCharts不會報錯，問題難以排查
- 階層結構複雜：在複雜情況下，使用json手工編寫配置，有一些屬性在階層結構中的位置，可能會搞錯，同樣的一個color屬性，有些是在root下面的，有些是在series下面的
- 屬性的型別：有些屬性支援字串，有些支援數字陣列，有些相容多種型別
## OptionCreator需要解決的問題
### 配色
一般來說，偏工程的程式設計師不注意配色，字型等問題，所以程式碼中會持續收集一些好的配色，可以直接使用
```ts
/**配色表 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 {
```
### 簡單圖形快速生成
上面的極座標的程式碼可以很快生成,同時對於生成的圖形，可以通過傳統的屬性設定的方式進行自定義的修改
```ts
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
```ts
/**
* 新增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行左右。
```ts
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）程式碼中好的設計也會整合到這個開源專案中。
對於大資料視覺化感興趣的，本人的公眾號可以關注一下。
以後需要參加資料視覺化比賽，可以組隊。
![alt](http://datavisualization.club:8081/assets/qrcode_for_gh_a8991e1cdfec_