Echarts 饼图，legend样式美化

最后样式图：

实现代码：

var myChart = echarts.init(document.getElementById('container'));let option = {/*{b}: {c} ({d}%*/legend: {orient: 'vertical',icon: "circle",itemWidth: 5,right: 20,top: 70,formatter: (name) => {let data = this.data;let total = 0;let target;for (let i = 0; i < data.length; i++) {total += data[i].value;if (data[i].name === name) {target = data[i].value;}}let arr = ['{a|' + name + '}{b|' + target + '}{c|' + ((target / total) * 100).toFixed(2) + '%}'];return arr.join('\n')},textStyle: {rich: {a: {verticalAlign: 'right',fontSize: 12,align: 'left',// padding:[0,28,0,0],width: 70},b: {fontSize: 12,align: 'left',// padding:[0,28,0,0],width: 50},c: {fontSize: 12,align: 'left',width: 50}}},},// color:this.getRandomColor,series: [{center: ['25%', '50%'],name: '访问来源',type: 'pie',radius: ['50%', '60%'],avoidLabelOverlap: true,hoverOffset: 0,hoverAnimation: false,silent: true,/*label: {normal: {show: false,position: 'center'}*/label: {show: true,position: 'center',textStyle: {fontSize: '20',fontFamily: '黑体',fontWeight: 'bold',rich: {d: {fontSize: 35,color: '#696969',},e: {fontSize: 17,color: '#696969',lineHeight: 25,}}},formatter: (params) => {let data = this.data;let number = 0;data.forEach((data) => {number += data.value;});return ['{d|' + number + '}\n' +'{e|影像数量}']}// emphasis: {//     show: true,//     textStyle: {//         fontSize: '30',//         fontWeight: 'bold'//     }// }},labelLine: {normal: {show: false}},data: this.data}]};if (option && typeof option === "object") {myChart.setOption(option, true);}

富文本标签

https://echarts.baidu.com/option.html#legend.textStyle.rich

Echarts 饼图，legend样式美化相关推荐

ECharts 饼图 legend 样式修改
在移动端展示一个数据很多的饼图的时候,首先看一下效果.ECharts legend 配置项 1 legend 让它在右面竖着显示. legend: {type: 'scroll',orient: 'v ...
echarts自定义legend样式
最近要完成显示一个饼图,使用echarts组件,先用官方给定的模板加载出样式,然后修改为自定义的样式.如下图是要自定义legend. 先放上官方加载出的代码 this.chart.setOption( ...
echarts饼图不同样式
仅做个人收藏记录. 1. 双层饼图 let htjc_option4_data = [{ value: 78, name: '网上申请合同数', textStyle: { color: '#28b1f ...
echarts 饼图legend点击不置灰
echart默认点击legend时候,当前点击的legend会置灰,有两种方式不置灰 1.设置selectedMode: false,这种方法控制不能点击legend legend: { orient ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
求大神赐教，如何实现echarts自定义legend的样式如图下的这种
求大神赐教,如何实现echarts自定义legend的样式如图下的这种嘤嘤嘤不会写
HTMLTestRunner 加强版 HwTestReport 加入样式美化、中英文版本、Selenium和Appium截图、饼图等内容
本项目源码已经进入Github的北极代码仓库(Arctic Code Vault),据说这些Bug**(Code)**要冰封1000年~~ 作为 HwTTK(Test Tool Kit )中的一员,H ...
echarts 饼图取消legend图例的点击事件，保留鼠标悬浮legend上显示tooltie提示信息的事件
echarts 饼图因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏,进行了数据的二次处理,所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件,会关 ...
ECharts 饼图数据放在饼图内部显示
1.业务需求将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值原样式如下 2.业务实现调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...

Echarts 饼图，legend样式美化

Echarts 饼图，legend样式美化相关推荐

最新文章

热门文章