首页 > 编程知识 正文

echarts例边框,echarts多条折线如何画

时间:2023-05-04 17:05:55 阅读:194349 作者:3735

先看下实现之后的效果:

饼图的分隔线:实际上是通过给边框宽度和边框色实现的 series:[itemStyle:{ // 间隔 borderWidth:2, borderColor:'#000' }] 图例的位置、间距: legend:{//纵向 orient: 'vertical', top: '40%', left: '67%', //图例距离饼图的距离 itemGap: 40, itemWidth: 14,// 设置图例图形的宽 itemHeight: 14} 图例的图形:(因为我写的图形是环形 不是官网自带的,需要给图例颜色设置为透明色,加上边框宽度,由于每个图形颜色不同,所以需要单独设置 ) legend: {//图例里 每条数据里的名字和图形颜色 data:[ { value: 25, name: '立项', itemStyle:{ borderColor:"#0ba5ff" } }, { value: 8, name: '验收', itemStyle:{ borderColor:"#fcd501" } }, { value: 4, name: '归档', itemStyle:{ borderColor:"#596c7a" } } ],//icon类型:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' icon: "circle", //全部样式 itemStyle:{ color:"transparent", // 间隔 borderWidth:2 }, } 图例后面带数据: formatter: function(name) { var index = 0; var clientlabels = [' 立项',' 验收',' 归档']; var clientcounts = [25,8,4]; clientlabels.forEach(function(value,i){ if(value == name){ index = i; } }); return name + " " + clientcounts[index]; } 全部代码: option = { title: { text: '项目阶段情况', left: 'center', top:"48%", textStyle:{ fontSize: 26, fontWeight:"normal", width:30, height:60 }, }, tooltip: { trigger: 'item' }, legend: { data:[ { value: 25,name: '立项', itemStyle:{ borderColor:"#0ba5ff" } }, { value: 8, name: '验收', itemStyle:{ borderColor:"#fcd501" } }, { value: 4, name: '归档', itemStyle:{ borderColor:"#596c7a" } } ], textStyle:{ fontSize:18 }, itemStyle:{ color:"transparent", // 间隔 borderWidth:2, // borderColor:"#0ba5ff" }, orient: 'vertical', top: '40%', left: '67%', itemGap: 40, itemWidth: 14,// 设置图例图形的宽 itemHeight: 14, //icon类型:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' icon: "circle", formatter: function(name) { var index = 0; var clientlabels = ['立项','验收','归档']; var clientcounts = [25,8,4]; clientlabels.forEach(function(value,i){ if(value == name){ index = i; } }); return name + " " + clientcounts[index]; }, // 图例关闭后的描边颜色 inactiveColor:"pink" }, series: [ { name: '项目阶段情况', type: 'pie', radius: ['36%', '30%'], // 标签不会重叠 avoidLabelOverlap: true, label: { show: false, position: 'center' }, // 选中时候的样式 emphasis: { label: { show: false, fontSize: '40', fontWeight: 'bold' } }, itemStyle:{ // 间隔 borderWidth:3, borderColor:'#000' }, labelLine: { show: true }, data: [ {value: 25,name: '立项',itemStyle:{color:"#0ba5ff"}}, {value: 8, name: '验收',itemStyle:{color:"#fcd501"}}, {value: 4, name: '归档',itemStyle:{color:"#596c7a"}} ] } ]};

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。