echarts 环形图，饼图，中间文字设置，数据块文字设置，图例的设置 , 饼图中间白条添加，饼图边框添加 |
您所在的位置：网站首页 › 环形图的制作 › echarts 环形图，饼图，中间文字设置，数据块文字设置，图例的设置 , 饼图中间白条添加，饼图边框添加 |
echarts 环形图，饼图，中间文字设置，数据块文字设置，图例的设置 , 饼图中间白条添加，饼图边框添加
|
1. 如下图所示： 2. 环形图代码如下 vue引入echarts：https://blog.csdn.net/qq_34790644/article/details/119932743 1. 中间字设置是 title ,数据内部显示文字是series中的label,图例是legend var sxechart=this.$echart.init(document.getElementById('echartId')) var data = [ { name: "正常兼职", value: 456 }, { name: "即将超期", value: 231 }, { name: "超期", value: 71 } ]; var subText = ((456 / (456 + 231 + 71)) * 100).toFixed(0) + "%"; var option = { //环形图中间文字 title: { text: "正常兼职", subtext: subText, textStyle: { fontSize: 12, color: "rgba(0,0,0,0.65)", fontWeight: 400 }, subtextStyle: { fontSize: 20, color: "#000000", fontWeight: 500 }, textAlign: "center", //图例文字居中显示 x: "38%", //距离左边的距离 y: "37%" //距离上边的距离 }, //数据的颜色设置 color: ["#2BCB95", "#F6BD16", "#FF3B30"], //鼠标移入显示的文字 tooltip: { trigger: "item", formatter: "{b} {c}人 ({d}%)" }, //图例设置 legend: { orient: "vertical", //竖直展示，如果横着的话，这个可以直接去掉 right: "10%", top: "center", align: "left", itemGap: 20, //数据上下的距离 icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 itemWidth: 10, // 设置宽度 data: data }, series: [ { radius: ["50%", "80%"], //第一个是中间圆的大小，第二个是外边圆的大小 center: ["40%", "50%"], //左边的距离，上边的距离 type: "pie", label: {、 normal: { formatter: function(data) { //.toFixed(0)去掉小数位，如果为2就是保留两位小数 let b = data.percent.toFixed(0) + "%"; subText = b; return b; }, // formatter: "{d}" + "%", //直接百分比，没有去掉小数位，上边是去掉小数位的 //formatter: "{b}：{c}人" //正常兼职：456 position: "inner", //文字显示在内部，如果在外边把这个去掉就好 color: "#fff", //文字的颜色 } }, data: data } ] }; sxechart.setOption(option,true);2. 饼图的代码如下： var sxechart=this.$echart.init(document.getElementById('echartId')) var option = { //鼠标移入显示文字 tooltip: { trigger: "item", formatter: "{a}:{b}:({d}%)" }, //图例设置 legend: { orient: "vertical", left: "50%", top: "center", align: "left", itemGap: 20, icon: "circle", itemWidth: 10, // 设置宽度 data: ["单位党委(党组，工委)审批", "区委组织部审批", "市委组织部审批"] }, //颜色设置 color: ["#5B8FF9", "#5AD8A6", "#78D3F8"], series: [ { name: "访问来源", type: "pie", selectedMode: "single", radius: [0, "73%"], //饼图大小设置 center: ["25%", "48%"], // 距离左边，距离上边距离 //数据文字内部展示 label: { normal: { formatter: "{d}%", position: "inner", color: "#fff" } }, //中间的白边设置 itemStyle: { // 此配置 normal: { borderWidth: 1, borderColor: "#fff" }, }, data: [ { value: 38.3, name: "单位党委(党组，工委)审批" }, { value: 41.6, name: "区委组织部审批" }, { value: 40.1, name: "市委组织部审批" } ] } ] }; sxechart.setOption(option,true); 3. 不要忘了给echarts设置宽高哦！！！ |
【本文地址】
今日新闻 |
推荐新闻 |