echart：legend中显示value+自定义文字样式

实现效果：

1、legend的icon设置为circle（圆形）

2、legend的文字分为两行，并且name和value已经后面的单位（家）文字样式都分别设置，利用富文本设置这样的效果

3、legend的icon需要跟第一行对齐，通过设置name的上padding来实现对齐效果，但是这种实现比较机械，不够完美。

4、在legend中显示value，这个需要使用legend的formatter 回调函数，并且data要从外部引入，完整代码如下：

<script>export var data = [{value: 16,name: '危化品企业'},{value: 1631,name: '非危化品企业'}]export default {name: "CompanyChart4",components: {ChartTitle,DataDisplay2},data() {return {option: {tooltip: {trigger: 'item'},legend: {orient: 'vertical',top: 0,left: 0,bottom: 'center',icon: "circle",textStyle: {color: "#ffffff",fontSize: 16,rich: {name: {fontSize: 16,color: "#ffaa00",padding: [40, 0, 0, 0]//上，右，下，左},num: {fontSize: 20,padding: [10, 10],},unit: {fontSize: 12,color: "#ffaaff"},}},//格式化图例文本formatter(name) {var tarValue;for (var i = 0; i < data.length; i++) {if (data[i].name == name) {tarValue = data[i].value;}}var v = tarValue;return [`{name|${name}}`,`{num|${v}}{unit|家}`,].join("\n");}},series: [{name: '危化企业占比情况',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,left: 200,label: {show: true,position: 'outside',color: '#0e94ea'},labelLine: {normal: {lineStyle: {color: '#0e94ea'},smooth: 0.2}},data: data}]}}},created() {},mounted() {this.$nextTick(() => {this.initEchart();})},methods: {//初始化图表initEchart() {let chartDom = document.getElementById('chart4');let myChart = this.$echarts.init(chartDom);myChart.setOption(this.option);},}}
</script>

echart：legend中显示value+自定义文字样式相关推荐

将CAD图纸中的线型和文字样式合并的方法技巧（二）
上篇文章中介绍了关于CAD图纸中的线型和文字样式合并可以使用标准检查的功能,这篇文章接着给大家介绍关于CAD检查的具体操作步骤,这样在之后的CAD绘图过程中,我们就可以通过这个功能比较好的进行这项操作 ...
如何在SAP的的凭证流浏览器(DRB)中显示客户自定义的凭证
如何在SAP标准提供的的凭证流浏览器(DRB: Document Relationship Browser )中显示客户自定义的凭证? 实现起来大致有以下几个步骤: 1. 为客户自定义凭证创建一个新的 ...
python中显示图片和文字
python中显示图片和文字这里的实现方法有两种:一种是python结合opencv实现:一种是python自带的matplot工具来实现的. python+opencv实现 python+matp ...
将CAD图纸中的线型和文字样式合并的方法技巧（一）
在使用浩辰CAD软件绘制CAD图纸的过程中,很多CAD制图初学入门者不太了解如何把CAD图纸中的线型和文字样式合并,虽然图层中提供了图层合并功能,但是线型和文字样式却并没有,其实如果想实现这个功能,可 ...
vue实现【echarts中 “7种” Bar柱状图图例】实现人格画像组件的封装，并在柱状条显示label自定义文字
图例一: 图例二: 图例三: 图例四: 图例五: 图例六: 图例七: 一.安装echarts npm install echarts --save 二.在需要的页面引入 import * as ech ...
echart legend 不显示_echart不显示legend
hello-uniapp中的 echart示例中不能能显示出 legend,而用同样得配置在echart官方网站中是可以显示的 { animation: false, color: ['#37A2 ...
pyqt 在Widgets中显示图片和文字
思路非常简单:<p>创建window,设置窗口大小,创建label1,导入图片,创建label2,导入文字,show,结束!</p> import sys from PyQt5 ...
[Xcode 实际操作]四、常用控件-(5)UILabel文本标签自定义文字样式
目录:[Swift]Xcode实际操作本文将演示给标签对象添加描边效果,在项目文件夹上,点击鼠标右键菜单, 选择[Create File]->[Cocoa Touch Class]->[ ...
微信小程序-生成保存图文海报-canvas生成图片、二维码、自定义文字样式
代码仓库:https://gitee.com/DerekAndroid/miniProgramAgen/tree/master/pages/canvasTest 效果: 点击保存图片- // ...
如何使用XE2及更高版本中提供的自定义皮肤(样式)功能
1. 制作样式文件: 点击 XE2+ 的 IDE 菜单上的 Tools-->Bitmap Style Designer, 打开设计器. 为每个需要的元素设计好图片或颜色或字体. 最重要的是, 要 ...

echart：legend中显示value+自定义文字样式

echart：legend中显示value+自定义文字样式相关推荐

最新文章

热门文章