项目中的数据大屏页面需要实现一个双直方图，查阅资料后发现可以通过 echarts-stat 配合 echarts 实现
// 安装 echarts、ecStat
npm install echarts
npm install echarts-stat
npm install ngx-echarts
// 在组件中引入
import { Component, OnInit, Input } from '@angular/core';
import * as echarts from 'echarts';
import * as ecStat from 'echarts-stat';
echarts.registerTransform(ecStat['transform'].histogram);
// 设置直方图的配置项
private distributionChartInstance;
public distributionChartOption: any = {
grid: {
left: 20,
top: 80,
containLabel: true
},
tooltip: {},
legend: {
data: ['Taylor VaR', 'FullReval VaR'],
textStyle: {
color: '#fff'
},
right: 30,
},
dataset: [],
xAxis: [
{
scale: true,
gridIndex: 0,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#fff'
},
},
],
yAxis: [
{
gridIndex: 0,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#fff'
},
},
],
series: [
{
name: 'Taylor VaR',
type: 'bar',
label: {
show: false,
position: 'top'
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.8,
color: 'rgb(97,160,250)',
},
{
offset: 1,
color: 'rgb(52,66,85)',
},
],
},
},
datasetIndex: 1,
xAxisIndex: 0,
yAxisIndex: 0,
// barWidth: 15,
barGap: '40%',
encode: {
// 将data中的data[0]映射到x轴
x: 0,
// 将data中的data[1]映射到y轴
y: 1,
// 将data中的data[2]映射到tooltip
// tooltip: 2,
// 将data中的data[4]映射到itemName
itemName: 4,
// 将data中的data[2]映射到label
// label: 2
},
},
{
name: 'FullReval VaR',
type: 'bar',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.8,
color: 'rgb(250,99,78)',
},
{
offset: 1,
color: 'rgb(62,32,36)',
},
],
},
},
label: {
show: false,
position: 'top'
},
datasetIndex: 2,
xAxisIndex: 0,
yAxisIndex: 0,
// barWidth: 15,
barGap: '40%',
encode: {
// 将data中的data[0]映射到x轴
x: 0,
// 将data中的data[1]映射到y轴
y: 1,
// 将data中的data[2]映射到tooltip
// tooltip: 2,
// 将data中的data[4]映射到itemName
itemName: 4,
// 表示将data中的data[2]映射到label
// label: 2
},
},
]
};
/**
* 重绘直方图 => VaR P&L Vector Distribution
*/
private redrawDistributionChart() {
const datasetSource = [];
this.taylorDistributionList.map((item, index) => {
datasetSource.push([item, this.fullRevalDistributionList[index]]);
});
this.distributionChartOption.dataset = [
{
source: datasetSource
},
{
transform: {
type: 'ecStat:histogram',
config: {
dimension: [0]
},
// print: true,
}
},
{
transform: {
type: 'ecStat:histogram',
config: {
dimension: [1]
},
// print: true,
}
},
];
this.distributionChartInstance.setOption(this.distributionChartOption);
}
最终效果如图
图片.png
