vue 中使用echarts的title富文本不生效,解决办法
这里看文档有点坑啊,页面<el-col class="chart-area" :span="8"><div class="box chart"><ve-histogram :title="chartTitle" :data="chartData" :settings="chartSettings"><...
·
这里看文档有点坑啊,页面
<el-col class="chart-area" :span="8">
<div class="box chart">
<ve-histogram :title="chartTitle" :data="chartData" :settings="chartSettings"></ve-histogram>
</div>
</el-col>
有效配置
chartTitle: {
text: '{b_title|收入趋势}{b_unit|(单位/万元)}',
textStyle: {
rich:{
// label: {
// formatter: ['{b_title|收入趋势}{b_unit|(单位/万元)}'].join('\n'),
// },
b_title: {
color: 'red',
},
b_unit: {
color: 'blue',
}
}
},
},
效果
根据官网的配置,照着官网的配置死活没有效果,于是想啊,然后看到下面配置style有了疑惑
上面个是title.textStyle.rich.自定义class.color
在例子确是title.textStyle.rich.label.normal.rich.自定义class.color 不一致,可能是这个例子有别的用法吧,不是很理解。
label: {
normal: {
// 在文本中,可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号:
// `{styleName|text content text content}` 标记样式名。
// 注意,换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},
...
}
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)