這裏寫自定義目錄標題
1. 漸變面積圖配置
this.config = {
chart: {
height: 300, //高度
backgroundColor: '#FFFFFF'//背景色
},
//標題
title: {
text: ''
},
//圖例
legend: {
enabled: true, //true展示，false不展示
//設定圖例項的CSS樣式。只支持有關文本的CSS樣式設定。
//默認是：{ "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }.
itemStyle: {
'fontSize': '14px',
'fontFamily': "'PingFangSC-Regular', 'Microsoft YaHei'",
'fontWeight': '400',
'color': '#A6A6A6'
},
//當鼠標懸停在圖例項上時，圖例項樣式可發生改變。此時，此配置用來實現對相應圖例項的CSS樣式設定。
//只支持有關文本的CSS樣式設定。樣式屬性繼承並覆蓋 style中的設定。 默認是：{ "color": "#000000" }.
itemHoverStyle: {
'fontSize': '14px',
'fontFamily': "'PingFangSC-Regular', 'Microsoft YaHei'",
'fontWeight': '400',
'color': '#A6A6A6'
},
//設定圖例標誌寬度。當squareSymbol 屬性設定後，此設定默認值取 symbolHeight，否則爲16。
symbolWidth: 11,
//設定圖例標誌（圖例中的符號）高度。默認與對應圖例項字號相同。
symbolHeight: 11,
//圖例標誌和圖例中的文本之間的像素距離。 默認是：5.
symbolPadding: 6,
},
//
tooltip: {
shared: true,//數據提示框
//爲數據點提示框設置純色或者漸變的背景色。在 CSS樣式模式中，數據點提示框的描邊寬度由.highcharts-tooltip-box類控制。
//默認是：rgba(247,247,247,0.85).
backgroundColor: "rgba(0,0,0,0.701)",
//數據點提示框的邊框顏色。 當該值爲null時，邊框會使用該數據列或該點的顏色。 默認是：null.
borderColor: "rgba(0,0,0,0.701)",
//數據點提示框圓角半徑 默認是：3.
borderRadius: 2,
//是否使用HTML代碼渲染提示框的內容用以代替SVG。使用HTML允許高級格式化，如在提示框中使用表格和圖像。 默認是：false.
useHTML: true,
//爲提示框添加CSS樣式。提示框同樣能夠通過 CSS 類 .highcharts-tooltip 來設定樣式。
//默認是：{ "color": "#333333", "cursor": "default", "fontSize": "12px", "pointerEvents": "none", "whiteSpace": "nowrap" }.
style: {
fontSize: "12px",
fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
color: "#FFFFFF",
lineHeight: "17px",
}
},
//X 軸（或分類軸）。
//默認情況下，x軸顯示在圖表的底部，y軸顯示在左側（多個y軸時可以是顯示在左右兩側），通過設置chart.inverted = true 可以讓x，y軸顯示位置對調。
xAxis: {
//座標軸類型。可以是 "linear", "logarithmic", "datetime" 或者 "category"之一，分別表示 “線性軸”、“對數軸”、“時間軸”、“分類軸”。
type: "category",
//座標軸刻度線的長度。 默認是：10.
tickLength: 0,
//座標軸刻度線的寬度，設置爲 0 時則不顯示刻度線。默認是：1
tickWidth: 0,
//座標軸刻度線的顏色。默認是：#ccd6eb.
tickColor: "#A6A6A6",
//本參數只對分類軸有效。 當值爲 on 時刻度線將在分類上方顯示；當值爲 between 時，刻度線將在兩個分類中間顯示。當 tickInterval 爲 1 時，默認是 between，其他情況默認是 on。 默認是：null.
tickmarkPlacement: 'on',
//網格線線條寬度，當設置爲 0 時則不顯示網格線。
gridLineWidth: 0,
// 座標軸軸線的顏色值。
lineColor: "#A6A6A6",
//座標軸軸線的寬度。
lineWidth: 0,
//座標軸標籤，即在刻度位置顯示對應的數值、名字或格式化後的內容。
labels: {
style: {
fontSize: "12px",
fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
color: "#999999",
lineHeight: "17px"
}
}
},
yAxis: [{
gridLineColor: "#A6A6A6",
gridLineDashStyle: 'Dot',
gridLineWidth: 0,
title: {text: ''},
labels: {
format: '{value}',
style: {
fontSize: "12px",
fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
color: "#A6A6A6",
lineHeight: "17px"
}
}
}, {
gridLineColor: "#A6A6A6",
gridLineDashStyle: 'Dot',
gridLineWidth: 0,
opposite: true,
startOnTick: true,
title: {text: ''},
labels: {
style: {
fontSize: "12px",
fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
color: "#999999",
lineHeight: "17px"
}
}
}],
plotOptions: {
series: {
fillOpacity: 0.15,
lineWidth: 2
}
},
series: [{
type: 'area',
name: '輿情指數',
color: '#B75F13',
yAxis: 1,
lineColor: "#B75F13",
// lineWidth:2,
// fillOpacity:0.2,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgba(250,217,97,0.1)'],
[1, 'rgba(247,107,28,0)']
],
},
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 2,
lineWidthPlus: 0
}
}
}, {
type: 'area',
name: '近期情緒平均值',
color: '#FBFBFB',
lineColor: "#FBFBFB",
yAxis: 1,
// lineWidth:2,
// fillOpacity:0.3,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgba(233,140,0,1)'],
[1, 'rgba(0,0,0,0)']
],
},
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 2,
lineWidthPlus: 0
}
}
}],
};
getChart = () => {
let {data1, data2, data3, data4} = this.state;
let config = JSON.parse(JSON.stringify(this.config));
let tooltip = {
pointFormatter: function () {
return '<span style="color:' + this.series.color + '"/>●</span>' + this.series.name + ': ' + this.y + "<br/>";
}
};
let tooltipTwo = {
pointFormatter: function () {
return '<span style="color:' + this.series.color + '"/>●</span>' + this.series.name + ': ' + this.y + "<br/>";
}
};
// config.xAxis.tickInterval = data1.length > 5 ? parseInt(data1.length / 5) : 1;
config.series[0].data = data1;
config.series[1].data = data2;
config.yAxis[1].max = utils.fixed(Math.max.apply(Math, data3));
config.yAxis[1].min = utils.fixed(Math.min.apply(Math, data4));
config.series[0].tooltip = tooltip;
config.series[1].tooltip = tooltipTwo;
return (
<Fragment>
<ChartBox style={this.chartStyle} chartId={"basic-info-chart"} config={config}/>
</Fragment>
)
}
樣例數據：
data1 = [ ["2018-10-11", 7.1],["2018-10-12", 6.5],["2018-10-13", 8.4],["2018-10-14", 9.2],["2018-10-15", 7.5],["2018-10-16", 6.6],["2018-10-17", 10.7]]
2. 餅圖配置
const config = {
chart: {
type: 'pie',
backgroundColor: '#191F28',
height: 260,
borderWidth: 0
},
tooltip: {
style: {fontSize: '10px;'},
backgroundColor: "rgba(0,0,0,0.701)",
borderColor: "rgba(0,0,0,0.701)",
borderRadius: 2,
useHTML: true,
headerFormat: '{point.key}<br>',
pointFormat: '收入：{point.y}億<br>佔比：{point.rate}% ',
style: {
fontSize: "12px",
fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
color: "#FFFFFF",
lineHeight: "17px",
}
},
legend: {
enabled: true
},
series: [{
type: 'pie',
data: this.state.dataSource,
innerSize: '77%',
dataLabels: {
connectorPadding: 0,//標籤和線之間的距離
enabled: false
},
states: {
hover: {
enabled: false,
halo: {
// opacity:1,//突出部分的透明度
// attributes:{
// },
// marker:{
// fillColr:'white'
// }
}
}
},
colors: pieColorList
}],
title: ''
};