1 export default {
2 Histogram: function (props) {
3 const data = [
4 {
5 type: '城市1',
6 sales: 30,
7 datsdetail: ['城市一1-1内容','城市一1-2内容']
8 },
9 {
10 type: '城市2',
11 sales: 20,
12 datsdetail: ['城市一2-1内容','城市一2-2内容']
13 },
14 ]
15
16 const config = {
17 data,
18 xField: 'type', // x轴字段
19 yField: 'sales', // y轴字段
20 color:'#5470c6', // 柱子颜色
21 maxColumnWidth: 40, // 柱子宽度
22 minColumnWidth: 40,
23 tooltip: {
24 trigger: 'axis',
25 // triggerOn:'click',
26 axisPointer: {
27 type: 'shadow',
28 },
29 fields: ['type', 'sales', 'datsdetail'],
30 customContent: (title, params) => { // 鼠标移入内容
31 if (params[0]) {
32 const { data } = params[0]
33 var result = '';
34 if (data?.datsdetail) {
35 result += `<div style="padding:8px 8px 0 8px">${data.type} <span style="float:right">任务项${data.sales}</span><hr /></div>`
36 data.datsdetail.forEach(function (item, index) {
37 result += `<p style="margin:0;padding:8px;">${index}、${item}</p>`
38 });
39 }
40 return result;
41 }
42
43 }
44 },
45 xAxis: {
46 label: {
47 autoHide: true,
48 autoRotate: true,
49 formatter: function (params) { //x轴内容太长换行
50 var newParamsName = "";// 最终拼接成的字符串
51 var paramsNameNumber = params.length;// 实际标签的个数
52 var provideNumber = 4;// 每行能显示的字的个数
53 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
54 /**
55 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
56 */
57 // 条件等同于rowNumber>1
58 if (paramsNameNumber > provideNumber) {
59 /** 循环每一行,p表示行 */
60 for (var p = 0; p < rowNumber; p++) {
61 var tempStr = "";// 表示每一次截取的字符串
62 var start = p * provideNumber;// 开始截取的位置
63 var end = start + provideNumber;// 结束截取的位置
64 // 此处特殊处理最后一行的索引值
65 if (p == rowNumber - 1) {
66 // 最后一次不换行
67 tempStr = params.substring(start, paramsNameNumber);
68 } else {
69 // 每一次拼接字符串并换行
70 tempStr = params.substring(start, end) + "\n";
71 }
72 newParamsName += tempStr;// 最终拼成的字符串
73 }
74
75 } else {
76 // 将旧标签的值赋给新标签
77 newParamsName = params;
78 }
79 //将最终的字符串返回
80 return newParamsName
81 }
82 },
83 },
84 meta: {
85 type: {
86 alias: '类别',
87 },
88 sales: {
89 alias: '销售额1',
90 },
91 formatter: function (data) {
92 console.log(data)
93 }
94 }
95 };
96 return <Column {...config} />;
97 }
98 }
