echarts.js折线图断点的的情况
这个文档里面有说明的,可以在断点的时候,把data设置为“-”,比如这样
[12, '-', 56,10, 23],记住0也是数据,没有数据用"-"代替,
但是echart自身有缺陷,就是没有数据的时候会有一个小黑点,
有多少没有数据,全部为“-”
![这里写图片描述](https://img-blog.csdn.net/20180302151934655?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVubmluZ19zaHVhaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
默认的 formatter 会提供这一效果,如果必须自定义 formatter,可以用 html 元素生成这个圆点
tooltip: {
trigger: 'axis',
formatter:function(params){
console.log(params)
let str = '';
params.forEach((item,index)=>{
if(index == 0){
str = item.name+"<br/>"
}else{
str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName+":"+item.value+'份'+"<br/>";
}
})
return str;
},
},
echarts之legend-改变图例的图标为自定义图片(或者其他形状)
![这里写图片描述](https://img-blog.csdn.net/20180302153738869?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVubmluZ19zaHVhaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
legend: {
top :20,
right:20,
itemGap:22,
itemWidth:12,
itemHeight:12,
data: [{
name:'全部',
icon:'roundRect'
icon:'image://./images/icon1.png'
},
{
name:'日常作业',
icon:'roundRect'
},
{
name:'周练',
icon:'roundRect'
icon:'image://./images/icon2.png'
}]
echarts.js 扇形图怎么出现空隙和间隙
1、push一个数据,但是颜色为空,这个办法的时候需要我们自己算,标签展示值和tootip
seriesData.push( {
value:item.examNum == 0 || examTypeStatsList.length == 1 ? 0 : (totalExam/80),
name: '',
itemStyle:{
normal:{
color:'#ffffff'
},
},
})
2、设置个白色的边框就好了 不用设空值 itemStyle: { normal: { borderColor: "#FFFFFF", borderWidth: 1, }},
seriesData.push({
value:item.examNum,
name:item.examTypeName,
labelLine: {
normal: {
length: 20,
length2: 70,
color:item.color,
}
},
itemStyle:{
normal:{
color:item.color,
fontWeight:'bold',
borderColor: "#FFFFFF",
borderWidth: (studentLevelList.filter(item=>item.num > 0)).length == 1 ? 0 : 5,
}
},
})