echarts 环形图配置 图例设置,中间文字设置
最近在工作项目中用到echarts进行制作一个环形图表,在网上查询了很多属性最终才制作成功,因此想总结一下,方便以后使用(第一次写博客,是不是这样写的哦)
导入echarts.js啥的就不说了,直接开始配置属性。
option = { legend: { //配置图例 itemWidth: 5, //图例大小 我这里用的是圆 itemGap: 30, //图例之间的间隔 orient: 'horizontal', //布局方式,默认水平布局,另可选vertical y: '80%', //垂直放的位置,可以写top,center,bottom,也可以写px或者百分比。x轴方向同理,默认center icon: "circle", //图例的形状,选择类型有:"circle"(圆形)、"rectangle"(长方形)、"triangle"(三角形)、"diamond"(菱形)、"emptyCircle"(空心圆)、
"emptyRectangle"(空心长方形)、"emptyTriangle"(空心三角形)、"emptyDiamon"(空心菱形),还可以放自定义图片,格式为"image://path",
path为图片路径
selectedMode: false, //选中哪个图例 false后图例不可点击 textStyle: { fontSize: 14, fontFamily: "Microsoft YaHei", }, data: [{name: '达标', textStyle: {color: "#3999dd"}}, { //name和下面的series中data的name对应显示。后面加textStyle可设置图例后面文字的颜色 name: '未达标', textStyle: {color: "#a3a6b4"} }], /*图例旁边显示数据*/ formatter: function (name) { var legendIndex = 0; var clientlabels = [{name: '达标', textStyle: {color: "#3999dd"}}, { name: '未达标', textStyle: {color: "#a3a6b4"} }]; var clientcounts = [result.standardNum, result.noStandardNum]; clientlabels.forEach(function (value, i) { if (value.name == name) { legendIndex = i; } }); return name + " " + clientcounts[legendIndex]; } }, color: ["#e3f9ff", "#3999dd"], //环形图两部分的颜色 graphic: [{ //环形图中间添加文字 type: 'text', //通过不同top值可以设置上下显示 left: 'center', top: '30%', style: { text: "80%"(自己设置显示内容), textAlign: 'center', fill: '#000', //文字的颜色 width: 30, height: 30, fontSize: 18, color: "#4d4f5c", fontFamily: "Microsoft YaHei" } }, { type: 'text', left: 'center', top: '45%', style: { text: '达标率', textAlign: 'center', fill: '#000', width: 30, height: 30, fontSize: 18, } }], series: [ //配置数据啥的 { name: '达标率', type: 'pie', //设为饼图 radius: ['60%', '70%'], //设置内半径和外半径,形成环状
minAngle:15, //设置最小角度
startAngle:270 //设置起始角度
clockWise:false, //默认逆时针 avoidLabelOverlap: false, //避免标注重叠 hoverAnimation: false, //移入放大 silent: true, center: ['50%', '40%'], label: { normal: { show: false, position: 'center' }, emphasis: { show: false, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [ {value: 20, name: '未达标'}, {value: 80, name: '达标'}, ] } ] };
第一篇随笔就这样结束了,后面再总结下其他的,over! ——千寻的小白龙 冲冲冲