蚂蚁金服:https://antv.vision/zh
//实例化近一年门急诊处方和住院病历点评数量月度评估表
initReviewMonthTotalChart() { //这个接口是初始化调用
//全局命名空间 DataSet,同时也是数据集类的构造函数。 数据视图构造函数。new DataView()
this.ReviewMonthTotalChartDataView = new DataView();
//dv.source()dv.source(data, options) 载入数据 this.ReviewMonthTotalChartDataView.source(this.ChartReviewMonthTotalData)
//dv.transform()dv.transform(options) 执行数据处理。
.transform({
type: 'fold',
fields: ['MZNum', 'JZNum', 'ZYNum'],
key: 'month',
value: 'value',
retains: ['Time'],
color: {
colorField: 'type', // 部分图表使用 seriesField
color: ['#63DAAB', '#6395FA', '#F7C122'],
}
})
.transform({
type: 'map',
callback: (obj) => {
const key = obj.month;
let type;
let type2; //可以set数据
if (key === 'MZNum') {
type2 = '门诊处方'
}
if (key === 'JZNum') {
type2 = '急诊处方'
}
if (key === 'ZYNum') {
type2 = '住院病历'
}
if (key === 'MZNum' || key === 'JZNum') {
type = 'a';
} else {
type = 'b';
}
obj.type = type;
obj.month = type2;
return obj;
},
});
//近一年门急诊处方和住院病历点评数量月度评估
this.ReviewMonthTotalChart = new Column('ChartReviewMonthTotal', {
data: this.ReviewMonthTotalChartDataView.rows,
xField: 'Time',
yField: 'value',
isGroup: true, //是否分组柱状图。
isStack: true, //是否堆积柱状图。
seriesField: 'month', //拆分字段,在分组柱状图下同 groupField、colorField,在堆积柱状图下同 stackField、colorField。
groupField: 'type', //拆分字段,用于堆叠分组柱状图,拆分优先级高于 seriesField,isGroup: true 时会根据 groupField 进行分组。
colorField: 'month',
label: {
position: 'top'
},
//格式化 tooltip item 内容。
tooltip: {
formatter: ((data) => {
return { name: data.month, value: data.value};
}),
},
//颜色在另一个地方定义看后面代码
color: ({
month
}) => {
return this.colorMap[month]
}
});
this.ReviewMonthTotalChart.render();
},
},
在data里面定义的颜色
colorMap: {
'门诊处方': '#6395FA',
'急诊处方': '#63DAAB',
'住院病历': '#F7C122',
},
图表在html里面的写法
<div id="ChartReviewMonthTotal"></div>
后面的效果图