数据可视化俱乐部

数据可视化俱乐部

eCharts存在问题

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

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

OptionCreator需要解决的问题

配色

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

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

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

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

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

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

简单图形快速生成

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

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

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

上图的复杂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版]-LMLPHP

07-03 20:47