react echarts修改字体和颜色等样式(设置宋体)
refer: https://zhuanlan.zhihu.com/p/586459547
在使用echarts的时候,可以设置字体,例如设置为宋体,设置字体颜色等:
// 字体样式设置
textStyle: {
decoration: 'none',
fontFamily: 'Arial, Verdana, sans-serif',
fontFamily2: '微软雅黑', // IE8- 字体模糊并且不支持不同字体混排,额外指定一份
// 宋体是 fontFamily:'SimSun'
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal'
},更具体的位置是:
return {
title: {
- text: <span style="color:#abe338">'堆积图</span>'
+ text: <span style="color:#abe338">'堆积图</span>',
+ textStyle:{
+ //文字颜色
+ color:<span style="color:#abe338">'black</span>',
+ //字体风格,<span style="color:#abe338">'normal</span>',<span style="color:#abe338">'italic</span>',<span style="color:#abe338">'oblique</span>'
+ fontStyle:<span style="color:#abe338">'normal</span>',
+ //字体粗细 <span style="color:#abe338">'normal</span>',<span style="color:#abe338">'bold</span>',<span style="color:#abe338">'bolder</span>',<span style="color:#abe338">'lighter</span>',<span style="color:#f5ab35">100</span> | <span style="color:#f5ab35">200</span> | <span style="color:#f5ab35">300</span> | <span style="color:#f5ab35">400</span>...
+ fontWeight:<span style="color:#abe338">'bold</span>',
+ //字体系列
+ fontFamily:<span style="color:#abe338">'SimSun</span>',
+ }
},
tooltip: {
trigger: <span style="color:#abe338">'axis</span>',
@@ <span style="color:#f5ab35">-130</span>,<span style="color:#f5ab35">6</span> <span style="color:#f5ab35">+140</span>,<span style="color:#f5ab35">9</span> @@ export default class CalculationCharts extends Component {
boundaryGap: false,
//data: [<span style="color:#abe338">'Mon</span>', <span style="color:#abe338">'Tue</span>', <span style="color:#abe338">'Wed</span>', <span style="color:#abe338">'Thu</span>', <span style="color:#abe338">'Fri</span>', <span style="color:#abe338">'Sat</span>', <span style="color:#abe338">'Sun</span>']
data: this.state.years,
+ axisTick: {
+ show: false // 隐藏刻度线
+ }
}
],
yAxis: [