// components/chat-components/summary/recordset/recordset.ts
|
import * as echarts from '@/libs/ec-canvas/echarts';
|
import { uuid } from '@/utils/uuid';
|
import { getChatChartOption } from '../../common';
|
|
import { ChartTypeEnum } from './types';
|
const defaultDisplayType = 'line';
|
const BASE_CHART_FONT_SIZE = 8;
|
Component({
|
|
/**
|
* 组件的属性列表
|
*/
|
properties: {
|
data: Object,
|
canvasId: String,
|
canvasDomId: String,
|
},
|
|
/**
|
* 组件的初始数据
|
*/
|
data: {
|
ec: {
|
// onInit: initChart
|
lazyload: true,
|
},
|
chartInstance: null,
|
groupedValues: null,
|
timeIndex: undefined,
|
valueIndex: undefined,
|
nameIndex: undefined,
|
timeCol: null,
|
valueCol: null,
|
preData: null,
|
activeChartType: ChartTypeEnum.Line
|
},
|
|
/**
|
* 组件的方法列表
|
*/
|
methods: {
|
getChartTypeSeriesOption(type) {
|
let result = {};
|
switch (type) {
|
case ChartTypeEnum.Bar:
|
result = {
|
type: 'bar',
|
symbol: 'none',
|
};
|
|
break;
|
case ChartTypeEnum.Line:
|
result = {
|
type: 'line',
|
symbol: 'none',
|
smooth: true,
|
};
|
|
break;
|
|
case ChartTypeEnum.Scatter:
|
result = {
|
type: 'scatter',
|
symbol: 'circle',
|
symbolSize: 4,
|
};
|
|
break;
|
default:
|
break;
|
}
|
|
return result;
|
},
|
setNewOption(series?: any[], extraOption: echarts.EChartsOption = {}) {
|
const isEmpty = !series || series.length === 0;
|
if (isEmpty) {
|
series = Object.keys(this.groupedValues).map((item) => {
|
const values = this.groupedValues[item];
|
return {
|
name: item === 'default' ? '' : item,
|
data: values.map((item) => [item[this.timeIndex], item[this.valueIndex]]),
|
type: defaultDisplayType,
|
symbol: 'none',
|
smooth: true,
|
};
|
});
|
}
|
const combineOption = wx.$_.defaultsDeep(extraOption, getChatChartOption(), {
|
|
grid: {
|
bottom: 20,
|
},
|
tooltip: {
|
textStyle: {
|
fontSize: BASE_CHART_FONT_SIZE
|
},
|
position: function(point, params, dom, rect, size){
|
let x = point[0],
|
y = point[1],
|
viewWidth = size.viewSize[0],
|
boxWidth = size.contentSize[0],
|
posX = 0;
|
if(x + boxWidth > viewWidth){
|
posX = x - boxWidth;
|
}else{
|
posX = x;
|
}
|
return [posX,y];
|
},
|
|
},
|
legend: {
|
top: 19,
|
show: series?.length > 1,
|
textStyle: {
|
fontSize: BASE_CHART_FONT_SIZE
|
},
|
type: 'scroll',
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
myBar: {
|
onclick: () => {
|
this.activeChartType = ChartTypeEnum.Bar;
|
this.chartInstance.setOption({
|
series: series.map((item) => ({
|
...item,
|
...this.getChartTypeSeriesOption(this.activeChartType),
|
})),
|
});
|
},
|
},
|
|
myScatter: {
|
onclick: () => {
|
this.activeChartType = ChartTypeEnum.Scatter;
|
|
this.chartInstance.setOption({
|
series: series.map((item) => ({
|
...item,
|
...this.getChartTypeSeriesOption(this.activeChartType),
|
})),
|
});
|
},
|
},
|
myLine: {
|
onclick: () => {
|
this.activeChartType = ChartTypeEnum.Line;
|
this.chartInstance.setOption({
|
series: series.map((item) => ({
|
...item,
|
...this.getChartTypeSeriesOption(this.activeChartType),
|
})),
|
});
|
},
|
},
|
},
|
},
|
title: {
|
text: this.preData?.title,
|
left: 'center',
|
textStyle: {
|
fontSize: BASE_CHART_FONT_SIZE,
|
}
|
},
|
xAxis: {
|
name: this.timeCol?.title,
|
axisLabel: {
|
fontSize: BASE_CHART_FONT_SIZE,
|
},
|
nameTextStyle: {
|
fontSize: BASE_CHART_FONT_SIZE,
|
}
|
},
|
yAxis: {
|
name: this.valueCol?.title,
|
/** @description 不强制保留0 */
|
scale: true,
|
axisLabel: {
|
fontSize: BASE_CHART_FONT_SIZE,
|
},
|
nameTextStyle: {
|
fontSize: BASE_CHART_FONT_SIZE,
|
}
|
},
|
series: series,
|
})
|
|
|
this.chartInstance.setOption(combineOption);
|
},
|
handleData() {
|
const data = this.properties.data;
|
if (!data || !data.cols || !data.values) {
|
return;
|
}
|
this.preData = data;
|
const xType = 'time';
|
this.timeIndex = data.cols.findIndex((item) => item.type === 'time');
|
if (this.timeIndex === -1) {
|
this.timeIndex = 0;
|
}
|
this.timeCol = data.cols[this.timeIndex];
|
|
this.valueIndex = data.cols.findIndex((item) => item.type === 'value');
|
if (this.valueIndex === -1) {
|
this.valueIndex = 2;
|
}
|
this.valueCol = data.cols[this.valueIndex];
|
|
let nameCol = null;
|
this.groupedValues = null;
|
if (data.chart === 'muli_line') {
|
this.nameIndex = data.cols.findIndex((item) => item.type === 'name');
|
if (this.nameIndex === -1) {
|
this.nameIndex = 1;
|
}
|
nameCol = data.cols[this.nameIndex];
|
this.groupedValues = wx.$_.groupBy(data.values, (item) => item[this.nameIndex]);
|
} else if (data.chart === 'single_line') {
|
this.groupedValues = {
|
default: data.values,
|
};
|
} else {
|
// 默认都当muli_line
|
this.nameIndex = data.cols.findIndex((item) => item.type === 'name');
|
if (this.nameIndex === -1) {
|
this.nameIndex = 1;
|
}
|
nameCol = data.cols[this.nameIndex];
|
this.groupedValues = wx.$_.groupBy(data.values, (item) => item[this.nameIndex]);
|
}
|
},
|
drawChart() {
|
const data = this.properties.data;
|
if (!data || !data.cols || !data.values) {
|
return;
|
}
|
this.handleData();
|
this.setNewOption();
|
}
|
},
|
|
lifetimes: {
|
ready() {
|
this[this.data.canvasDomId] = this.selectComponent('#' + this.data.canvasDomId);
|
this[this.data.canvasDomId].init((canvas, width, height, dpr) => {
|
this.chartInstance = echarts.init(canvas, null, {
|
width: width,
|
height: height,
|
devicePixelRatio: dpr, // new
|
locale:'ZH'
|
})
|
|
this.drawChart();
|
return this.chartInstance;
|
})
|
|
}
|
}
|
})
|
