[开源]eCharts配置简化包OptionCreator[typescript版]

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

大小写敏感：在没有IDE的智能提示下，很容易写错，而且即使写错，eCharts不会报错，问题难以排查
阶层结构复杂：在复杂情况下，使用json手工编写配置，有一些属性在阶层结构中的位置，可能会搞错，同样的一个color属性，有些是在root下面的，有些是在series下面的
属性的类型：有些属性支持字符串，有些支持数字数组，有些兼容多种类型
OptionCreator需要解决的问题
配色
一般来说，偏工程的程序员不注意配色，字体等问题，所以代码中会持续收集一些好的配色，可以直接使用

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

alt

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

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

alt

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

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);