import { Component, OnInit } from '@angular/core';
import { addMilliseconds, format } from 'date-fns';
import { CommomService } from 'src/app/core/services/commom.service';
@Component({
selector: 'app-test-base-bar-sub-chart',
templateUrl: './test-base-bar-sub-chart.component.html',
styleUrls: ['./test-base-bar-sub-chart.component.scss']
})
export class TestBaseBarSubChartComponent implements OnInit {
constructor(
private commonService: CommomService
) { }
fileName: string = "各城市降雨量";
chartTitle: string = "测试基础柱状图";
loading: boolean = true;
data;
legend: boolean = true;
position: string = 'bottom';
barData //条形图data
bcacChartTitle = "达标率";
translateionNum: number = 0;
tooltipUnit: string = "";
bcacTooltip;
negativeBarData;
negativeBarLoading: boolean = false;
pyramidChartData; //金字塔图
stackColumnData; //堆叠柱状图数据
basicLineChartData;//基础折线图数据
bigDataLineChartData; //大数据量折线图
multiLineChartData; //点值折线图
basicPieChartData; //基础饼图
basicPieChartSeriesName; //基础饼图系列
rosePieChartData//玫瑰图数据
roseType: string;
ngOnInit() {
this.initChart();
this.initBarChart();
this.initNegativeBarChart();
this.initPyramidChart();
this.initBasicLineChart();
this.initBigDataLineChart();
this.initPointValueLineChart();
this.initStackColumnChart();
this.initBasicPieChart();
this.initRosePieChart();
}
initChart() {
this.data = {
seriesName: ['东京', '纽约', '伦敦', '柏林'],
xData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
yData: [["49.9", "71.5", "106.4", "129.2", "144.0", "176.0", "135.6", "148.5", "216.4", "194.1", "95.6", "54.4"], [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3], [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2], [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]],
markLine: [
[{ type: 'max' }, { type: 'min' }],
null,
[{ type: 'average' }, { type: 'min' }]
],
}
}
initBarChart() {
let chartData = {
yData: ["东城", "西城", '朝阳', '丰台', '石景山', '海淀', '顺义', '通州', '大兴', '房山', '门头沟', '昌平', '平谷', '密云', '怀柔', '延庆'],
xData: [],
seriesName: ['昼间达标率'],
};
function getVirtualData() {
chartData.seriesName.forEach(legend => {
let xData = []
chartData.yData.forEach(yCategory => {
xData.push(Math.floor(Math.random() * 100).toFixed(1));
});
xData = xData.sort((a, b) => {
return a - b;
})
chartData.xData.push(xData)
});
}
getVirtualData();
this.barData = chartData;
this.translateionNum = 55;
this.tooltipUnit = "%"
}
initNegativeBarChart() {
let datas = makeData(50, 7, 16);
let style = this.commonService.changeFontSize();
style.interval.right = "110";
this.bcacTooltip = {
tooltipUnit: "%",
translationNumber: 60
}
let params = {
datas: datas,
seriesNames: [
"东城区",
"西城区",
"朝阳区",
"丰台区",
"石景山区",
"海淀区",
"门头沟区",
"房山区",
"通州区",
"顺义区",
"昌平区",
"大兴区",
"怀柔区",
"平谷区",
"密云区",
"延庆区"
],
};
this.negativeBarData = params;
// 数据模拟
function makeData(baseValue, number, seriesNumber): any[] {
let seriesDatas = [];
for (let j = 0; j < seriesNumber; j++) {
let datas = [];
if (j % 3 == 0) {
baseValue = 40;
} else {
baseValue = 70;
}
let funcZones = ["0类", "1类", "2类", "3类", "4a类", "4b类"];
if (number > funcZones.length) {
number = funcZones.length;
}
for (let i = 0; i < number; i++) {
let value = (
baseValue +
10 * Math.random()
).toFixed(1);
datas.push([funcZones[i], value]);
}
seriesDatas.push(datas);
}
return seriesDatas;
}
}
initPyramidChart() {
this.tooltipUnit = "%"
let tempDataArr1 = ['-100', '-99', '-96', '-91', '-90', '-87', '-86', '-85', '-81', '-79', '-76', '-74', '-73', '-69', '-67', '-65', '-63', '-60']
let tempDataArr2 = tempDataArr1.map(item => {
return Math.abs(+item).toFixed(0);
})
let data = {
seriesName: ['昼间', '夜间'],
stack: '达标率',
xData: [tempDataArr1, tempDataArr2],
yData: ["东城", "西城", '朝阳', '丰台', '石景山', '海淀', '顺义', '通州', '大兴', '房山', '门头沟', '昌平', '平谷', '密云', '怀柔', '延庆'],
}
this.pyramidChartData = data;
}
initBasicLineChart() {
let simulateData = makeData();
let style = this.commonService.changeFontSize();
style.interval.right = "30";
let params = {
customGrid: style.interval,
xAxisDatas: simulateData.xAxisDatas,
seriesNames: simulateData.seriesNames,
datas: simulateData.datas,
markLine: simulateData.markLine,
markArea: simulateData.markArea
};
this.basicLineChartData = params;
function makeData() {
let data = {
xAxisDatas: ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06", "10-07"],
// yNameGap: 30,
seriesNames: ["会展中心站", "匡达制药厂", "造纸七厂", "兴谷开发区"],
datas: [
[58.1, 60.4, 64.2, 50.8, 51.8, 64.5, 57.4],
[57.1, 58.4, 63.4, 51.8, 51.5, 62.5, 62.1],
[59.5, 60.4, 57.5, 50.0, 54.2, 57.2, 51.4],
[60.5, 61.4, 58.5, 51.0, 55.2, 58.2, 60.5]
],
markLine: [
[{ name: '最大值', type: 'max' }, { name: '最小值', type: 'min' }], false, [{ name: '平均值', type: 'average' }]
],
markArea: [
[
[{
name: '开始高峰',
xAxis: '10-01'
}, {
xAxis: '10-03'
}], [{
name: '结束高峰',
xAxis: '10-05'
}, {
xAxis: '10-06'
}],
],
[
[{
name: '开始高峰',
xAxis: '10-03'
}, {
xAxis: '10-04'
}], [{
name: '结束高峰',
xAxis: '10-06'
}, {
xAxis: '10-07'
}],
]
]
};
return data;
}
}
initBigDataLineChart() {
this.bigDataLineChartData = {
datas: [makeData(3000, 57), makeData(3000, 60.1)],
seriesNames: ["Leq", "Lmax"],
};
function makeData(num, level) {
let datas = [];
let a, b;
let dateTime = new Date("2020-10-01 00:00:00");
for (let i = 0; i < num; i++) {
if (i % 30 === 0) {
a = 2 * Math.random();
}
if (i % 30 === 0) {
b = 2 * Math.random();
}
dateTime = addMilliseconds(dateTime, 1000);
datas.push([
format(dateTime, "yyyy-MM-dd HH:mm:ss"),
(level + 2 * Math.sin(i / 50) + a + b + Math.random()).toFixed(2),
]);
}
return datas;
}
}
initPointValueLineChart() {
this.multiLineChartData = makeData()
function makeData() {
let xAxisDatas = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
let seryNames = [];
let datas = [];
for (let i = 1; i < 16; i++) {
seryNames.push('监测站点' + i);
let subDatas = [];
for (let j = 0; j < 12; j++) {
subDatas.push((50 + 20 * Math.random()).toFixed(2));
}
datas.push(subDatas);
}
// let dataObj = {
// xAxisDatas: xAxisDatas,
// seriesNames: seriesNames,
// datas:datas
// };
return {
xAxisDatas: xAxisDatas,
seryNames: seryNames,
datas: datas
};
}
}
initStackColumnChart() {
let data = {
seriesName: ['大型车', '大型车', '中小型车', '中小型车',],
stack: ['昼间', '夜间', '昼间', '夜间'],
xData: ['0类', '1类', '2类', '3类', '4a类', '4b类'],
yData: [[0, 12, 240, 404, 580, 640], [12, 20, 210, 774, 864, 856], [200, 564, 300, 646, 560, 604], [365, 416, 445, 506, 564, 654]],
// tooltipFormatter: (params) => {
// let another;
// if (params.seriesIndex % 2 == 0) {
// another = data.yData[2 - params.seriesIndex][params.dataIndex]
// } else {
// another = data.yData[4 - params.seriesIndex][params.dataIndex]
// }
// let total = params.value + another;
// let str = '';
// str += params.name + '-' + data.stack[params.seriesIndex] + '
';
// str += '' + params.seriesName + '： ' + params.value + '
'
// str += ' 总量: ' + total + '
'
// return str;
// }
}
this.stackColumnData = data;
}
initBasicPieChart() {
this.basicPieChartSeriesName = '区域声环境质量等级比例';
this.basicPieChartData = [
{ value: 123, name: '一级' },
{ value: 311, name: '二级' },
{ value: 102, name: '三级' },
{ value: 28, name: '四级' },
{ value: 8, name: '五级' }
]
}
initRosePieChart() {
this.roseType = "radius"
this.rosePieChartData = [
{ value: 10, name: 'rose1' },
{ value: 5, name: 'rose2' },
{ value: 15, name: 'rose3' },
{ value: 25, name: 'rose4' },
{ value: 20, name: 'rose5' },
{ value: 35, name: 'rose6' },
{ value: 30, name: 'rose7' },
{ value: 40, name: 'rose8' },
{ value: 45, name: 'rose9' },
{ value: 60, name: 'rose10' },
{ value: 61, name: 'rose11' },
]
}
selected($event) {
console.log($event)
}
updateData() {
this.data = {
seriesName: ['xxx',],
xData: ['一', '二'],
yData: [["50.0", "71.5", "106.4"]],
yAxisName: '降雨量(mm)',
tooltipUnit: 'mm',
}
}
over($event){
}
calcFn = function ($event) {
console.log($event)
}
}