|
|
/*
|
|
|
* 图表配置文件
|
|
|
* 此文件定义了多种不同类型图表的配置信息，可能用于图表绘制库（如 Highcharts、ECharts 等，具体依赖使用场景）来创建具有特定样式和交互功能的图表。
|
|
|
*/
|
|
|
|
|
|
// 定义一个名为 typeConfig 的数组，用于存储不同类型图表的配置对象。每个对象对应一种图表类型的相关配置设置。
|
|
|
var typeConfig = [
|
|
|
{
|
|
|
chart: {
|
|
|
type: 'line'
|
|
|
},
|
|
|
plotOptions: {
|
|
|
line: {
|
|
|
dataLabels: {
|
|
|
enabled: false
|
|
|
},
|
|
|
enableMouseTracking: true
|
|
|
// 以下是对内部配置项的解释：
|
|
|
// dataLabels.enabled: 设置是否显示数据标签（例如在折线上每个数据点对应的数值标签），这里设置为 false，表示不显示。
|
|
|
// enableMouseTracking: 设置是否启用鼠标跟踪功能，当设置为 true 时，鼠标悬停在图表元素（如折线的线段、数据点等）上时可能会触发相应的交互效果（如显示提示信息等）。
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
chart: {
|
|
|
type: 'line'
|
|
|
},
|
|
|
plotOptions: {
|
|
|
line: {
|
|
|
dataLabels: {
|
|
|
enabled: true
|
|
|
},
|
|
|
enableMouseTracking: false
|
|
|
// 对于这个配置对象：
|
|
|
// dataLabels.enabled: 设置为 true，表示显示数据标签，会在折线上相应的数据点位置显示对应的数值等信息。
|
|
|
// enableMouseTracking: 设置为 false，即禁用鼠标跟踪功能，鼠标悬停在图表元素上不会触发额外的交互效果。
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
chart: {
|
|
|
type: 'area'
|
|
|
}
|
|
|
// 这个配置对象仅设置了图表类型为 'area'（面积图），可能使用默认的其他配置项（具体取决于使用的图表库的默认配置规则）来绘制面积图，后续如果需要可以继续添加更多如颜色、样式、交互等相关配置在此对象内。
|
|
|
},
|
|
|
{
|
|
|
chart: {
|
|
|
type: 'bar'
|
|
|
}
|
|
|
// 配置图表类型为 'bar'（柱状图），同样可能依赖图表库默认配置来展示柱状图，如需个性化设置（如柱子颜色、宽度、间距等），可在此对象内添加对应配置项。
|
|
|
},
|
|
|
{
|
|
|
chart: {
|
|
|
type: 'column'
|
|
|
}
|
|
|
// 设置图表类型为 'column'（也是柱状图的一种常见表示形式，与 'bar' 在某些图表库中有细微区别，比如方向等，具体看库的实现），可根据需求进一步完善其详细配置内容。
|
|
|
},
|
|
|
{
|
|
|
chart: {
|
|
|
plotBackgroundColor: null,
|
|
|
plotBorderWidth: null,
|
|
|
plotShadow: false
|
|
|
},
|
|
|
plotOptions: {
|
|
|
pie: {
|
|
|
allowPointSelect: true,
|
|
|
cursor: 'pointer',
|
|
|
dataLabels: {
|
|
|
enabled: true,
|
|
|
color: '#000000',
|
|
|
connectorColor: '#000000',
|
|
|
formatter: function() {
|
|
|
return '<b>'+ this.point.name +'</b>: '+ ( Math.round( this.point.percentage*100 ) / 100 ) +' %';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// 对于此配置对象的详细解释：
|
|
|
// chart 部分的配置：
|
|
|
// plotBackgroundColor: 设置图表绘图区域的背景颜色，这里设置为 null，可能表示使用默认背景颜色（具体由图表库决定）。
|
|
|
// plotBorderWidth: 设置绘图区域边框宽度，null 值通常也意味着使用默认边框宽度设定（取决于图表库）。
|
|
|
// plotShadow: 设置绘图区域是否显示阴影效果，false 表示不显示阴影。
|
|
|
// plotOptions.pie 部分的配置（针对饼图的相关设置）：
|
|
|
// allowPointSelect: 设置是否允许选中饼图中的单个数据点（扇区），true 表示允许，用户可以通过交互（如点击）来选中某个扇区。
|
|
|
// cursor: 设置鼠标指针在饼图区域上的样式，'pointer' 通常表示鼠标指针变为手型，提示用户此处可进行交互操作。
|
|
|
// dataLabels.enabled: 设置为 true，表示显示数据标签，即在饼图的每个扇区上显示相应的文字说明。
|
|
|
// dataLabels.color: 设置数据标签的文字颜色为黑色（'#000000'）。
|
|
|
// dataLabels.connectorColor: 设置数据标签与扇区之间连接线的颜色为黑色（'#000000'）。
|
|
|
// dataLabels.formatter: 这是一个函数，用于自定义数据标签的显示内容格式。在这里，它返回的格式是将扇区对应的名称加粗显示，后面跟着该扇区占比的百分比数值（保留两位小数），例如 "<b>类别A</b>: 25.00 %"。
|
|
|
}
|
|
|
}
|
|
|
]; |
