echarts标题字体大小_echarts饼图显示百分比
echarts标题字体大小_echarts饼图显示百分比
大家好，又见面了，我是你们的朋友全栈君。
解决echarts饼图显示百分比，和显示内容字体及大小 // 基于准备好的dom，初始化echarts实例 var pieEchart = echarts.init(document.getElementById(‘pieEchart’)); // 指定图表的配置项和数据 var pieoption = { 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′}}}, ] } ] }; // 使用刚指定的配置项和数据显示图表。 pieEchart.setOption(pieoption);
<div id="pieEchart" style="width: 480px;height:300px;">
如何给eCharts饼图区域指定颜色
- option = {
- title : {
- text: “全局指标状态分布图”,
- x:”left”,
- y:”top”
- },
- tooltip : {
- show: true,
- formatter: “{a} <br/>{b} : {c} ({d}%)”
- },
- color:[“red”, “green”,”yellow”,”blueviolet”]
- }
刷新数据
<div class="foot_ri" id="txt"> <div class="foot_txt"> <span style="color: #6e85bf;font-size: 20px">诉求百分比占比</span> <div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"_echarts_instance_="ec_1550106173775"> <div style="position: relative; overflow: hidden; width: 1920px; height: 1037px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"> <canvas data-zr-dom-id="zr_0" width="1920" height="1037" style="position: absolute; left: 0px; top: 0px; width: 1920px; height: 1037px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas> </div> </div> </div> </div> <img src="../static/images/refresh.png" id="ig" style="margin-top: -370px;margin-left: 935px;"> </div> 点击 id=”ig” 图片，id=”container” 饼图刷新
<#–2019/2/13饼图–> <script type=”text/javascript”> var dom = document.getElementById(“container”); var myChart = echarts.init(dom); var app = {}; option = null; option = { // title: { // text: ‘诉求百分比占比’, // subtext: ”, // x: ‘center’ // }, tooltip: { trigger: ‘item’, formatter: “{a} <br/>{b} : {c} ({d}%)”/*鼠标经过显示*/ }, // color:[‘#0160ae’, ‘#36a5fc’,’#0d86e7′], color: [‘#6f87bf’, ‘#7084a2’, ‘#5e6787’], legend: { orient: ‘vertical’, // bottom: 500, left: ‘right’, data: [‘咨询’, ‘意见建议’, ‘投诉举报’], textStyle: { fontWeight: 300, fontSize: 16, //文字的字体大小 color: ‘#345cc1’//文字的字体颜色 }, }, series: [ { name: ‘访问来源’, type: ‘pie’, radius: ‘65%’, /*饼图大小*/ center: [‘40%’, ‘50%’], /*饼图位置*/ data: [ {value: 335, name: ‘咨询’}, {value: 234, name: ‘意见建议’}, {value: 135, name: ‘投诉举报’} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: ‘rgba(0, 0, 0, 0.5)’ } } } ] }; ; if (option && typeof option === “object”) { myChart.setOption(option, true); } </script> <#–结束–> <#–2019/2/15刷新数据–> <script> $(‘#ig’).click(function () { var dom = document.getElementById(“container”); var myChart = echarts.init(dom); myChart.setOption({ //加载数据图表 series: { // 根据名字对应到相应的系列 name: [‘数量’], data: [ {value: 222, name: ‘咨询’}, {value: 555, name: ‘意见建议’}, {value: 56, name: ‘投诉举报’} ] } }) }) </script> <#–结束–>
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/124677.html原文链接：https://javaforall.cn