源码

let circularGraph= {title: "标题",head: false,tuglie: ["微信","支付宝","银行卡","聚合支付"],data: [{name: "度小满",value: 22,},{name: "广大云",value: 26,},{name: "闪支付",value: 44,},{name: "聚合支付",value: 66,},],sum: {name: ["支付笔数"],number: 341,},color: ["#FFBA1F","#30C9C9","#FF2934","#A878E8","#9F9BFF","#FF6465","#36F2F2","#2E4D90","#FC38A4","#F87930","#59FD29","#5FD879",],}option = {title: {text: circularGraph.title, //标题文本left: "center",show: circularGraph.head, //是否显示标题组件},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},tooltip: {trigger: "item",formatter: "{b}: {d}%",//   formatter: "{b}: {c} ({d}%)",},legend: {show: true,orient: "visualMap", //图例水平对齐排列x: "right",y: "center",padding:[0,20,0,0],textStyle: {//图例文字的样式color: "#333",fontSize: 12,},data: circularGraph.data.tuglie, //图例组件//   formatter: (name) => {//     let num = "";//     circularGraph.data.forEach((item) => {//       //格式化图例文本，支持字符串模板和回调函数两种形式。//       if (item.name === name) {//         num = String(item.value).replace(/(\d)(?=(?:\d{6})+$)/g, "$1.");//         return;//       }//     });//     return name + "：" + num;//   },},// graphic: {//   type: "text",//   left: '37%',//   top: "center",//   style: {//     text://       circularGraph.sum.name + //圆饼中心显示数据，这里是显示得总数//       "\n\n" +//       String(circularGraph.sum.number).replace(/(\d)(?=(?:\d{6})+$)/g, "$1."),//     textAlign: "center",//     fill: "#333",//     width: 30,//     height: 30,//     fontSize: 14,//   },// },series: [{type: "pie",// radius: ["35%", "65%"],// center: ['40%', '50%'],label:{ //饼图图形上的文本标签normal:{show:true,position:'inner', //标签的位置textStyle : {fontWeight : 300 ,fontSize : 16    //文字的字体大小},formatter:'{d}%'}},itemStyle: {normal: {label: {show: true,position:'inner', //标签的位置textStyle: { color: "#333", fontSize: "14" },formatter: function (val) {//让series 中的文字进行换行// return val.name;return val.name + "\n(" + val.percent + "%)";},},labelLine: {show: true,lineStyle: { color: "#3c4858" },},},emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",textColor: "#000",},},data: circularGraph.data, //数据},],color: circularGraph.color //颜色};

源码

option = {  title : {  text: '公里总里程',   x:'left',textStyle:{color:'#FFFFFF',fontSize:25}},  tooltip : {  trigger: 'item',  formatter: "{a} <br/>{b} : {c} KM"  },  legend: {  orient : 'vertical',  x : 'left',  top:40,itemWidth:70,itemHeight:30,formatter: '{name}',textStyle:{color: '#FFFFFF'},data:[{name:'高速50KM',icon:'rect'},{name:'一级150KM',icon:'rect'},{name:'二级150KM',icon:'rect'},{name:'三级100KM',icon:'rect'},{name:'四级50KM',icon:'rect'}]  },   calculable : true,  series : [  {  name:'公里总里程',  type:'pie',  radius : '70%',//饼图的半径大小  center: ['60%', '60%'],//饼图的位置 label:{            //饼图图形上的文本标签normal:{show:true,position:'inner', //标签的位置textStyle : {fontWeight : 300 ,fontSize : 16    //文字的字体大小},formatter:'{d}%'}},data:[  {value:50,name:'高速50KM',itemStyle:{normal:{color:'#FE0000'}}},  {value:150,name:'一级150KM',itemStyle:{normal:{color:'#F29700'}}},  {value:150,name:'二级150KM',itemStyle:{normal:{color:'#02B0ED'}}}, {value:100,name:'三级100KM',itemStyle:{normal:{color:'#55E87D'}}},{value:50,name:'四级50KM',itemStyle:{normal:{color:'#FFE200'}}},]}  ]  };

echarts饼图显示百分比和显示内容字体及大小属性设置相关推荐

echarts饼图内部百分比外部显示文字和数值
UI给出了这样一张图,饼图上不仅显示文字和数值,内部也要显示百分比.由于series中的label只能设置成饼图内部或者饼图外部,无法实现内外部兼有.此时可以在series中设置两个相同的配置对象,让 ...
解决echarts饼图显示百分比，和显示内容字体及大小,如何给eCharts饼图区域指定颜色
解决echarts饼图显示百分比,和显示内容字体及大小 // 基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document. ...
Echarts升级2：柱状图头部显示百分比、同时内容在弹框显示
目录需求及技术说明: 效果图: 根据排污口的排口情况应用echarts的柱状图: 详解1:头部添加百分比详解2:在弹框不出现百分比详解3:一种参数同时出现两种值,并且分别展现需求及技术说明: ...
ls 显示目录下的内容和文件相关属性信息
1.命令功能 ls命令是"list directory contents",显示当前目录下的内容和文件属性. 2.语法格式 ls [option] file ls 选项文 ...
css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
Echarts 柱状图、折线图和仪表盘的一写属性设置
目录一. 柱状图 1.背景线设置为虚线,lineStyleL里面的type属性为dashed,默认是实线. 2.鼠标放在柱子上的阴影效果,如果用shadow无法设置宽度 3.鼠标放上的tip自定义 ...
CSS -- CSS字体及文本属性设置总结
文章目录 1 CSS字体属性 1.1 字体系列 1.2 字体大小 1.3 字体粗细 1.4 文字样式 1.5 字体复合属性 1.6 字体属性总结 2 CSS文本属性 2.1 文本颜色 2.2 对齐文本 ...
echarts饼图显示百分比，和显示内容字体及大小
// 基于准备好的dom,初始化echarts实例var pieEchart = echarts.init(document.getElementById('pieEchart'));// 指定图表的 ...
echarts年龄饼图_解决echarts饼图显示百分比，和显示内容字体及大小
//基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document.getElementById('pieEchart'));//指定图表的配 ...

echarts饼图显示百分比和显示内容字体及大小属性设置

源码

源码

echarts饼图显示百分比和显示内容字体及大小属性设置相关推荐

最新文章

热门文章