1. legend的icon使用图片
image.png
//data是数据源 iconurls是自己引入的图片路径数组
let legendData=data.map((value,index)=>{
let iconurl=`image://${iconurls[index]}`;
return {"name":value.name,"icon": iconurl,}
});
let legend={
"data":legendData,
"bottom": "0%",
"textStyle": {
"color": "#fff"
}
}
2. label可能会溢出 可能会重叠
image.png
这个问题会在饼状图某一部分的值非常小时出现，label溢出被截断隐藏了，Google到的答案是Echarts的标签布局算法对labelLine依赖错误。所以这个Echarts本身的算法bug，我能解决的方法是缩小这个饼图的大小，让label有足够的空间展示，属于治标不治本的方法。
//这个radius原本是radius: ['35%', '47%']
radius: ['25%', '37%']
修复后效果
或者设置了label重叠的属性，会使以上情况的label不溢出，而是重叠。
//默认是true，如果设置false，就会出现下图情况
avoidLabelOverlap: false
image.png
3.设置网格坐标线
image.png
xAxis: {
type : 'category',
data: this.state.userAssetData.xdata,
axisLine:{
lineStyle:{
color:'#aab0b7',
width:2
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
//这里是设置坐标轴自身样式，有一点需要注意是坐标轴的value的颜色会跟坐标轴线保持一致，两者颜色不会分开
axisLine:{
lineStyle:{
color:'#aab0b7',
width:2
}
},
//这里是设置坐标轴刻度
axisTick: {
show: false
},
splitLine:{
show:true,
lineStyle:{
color:'#52596a',
//虚线设置的关键代码在这里
type:"dotted",
}
}
},
4.设置不同系列的渐变色
image.png
可以看到这五个bar是不同的渐变色
series: [
{
type: 'bar',
barWidth: '25%',
itemStyle: {
normal:{
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组...我觉得这句话是错的，当柱子数目
//大于colorList的长度，会报错，can not read property of undefined， 我认为是colorList中没colorList[params.dataIndex]这一项。
color: function (params){
let colorList=[
['#2e5398','#5b8bc9'],
['#1c87c9','#3cbce6'],
['#2ab1b5','#54d9db'],
['#2c7c7d','#57b3b4'],
['#729f82','#aaceb8'],
];
//这里是渐变的设置关键代码
return new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 1, color: colorList[params.dataIndex][0]},
{offset: 0, color: colorList[params.dataIndex][1]}
]
)
},
shadowColor: "rgba(255,255,255,0.3)",
shadowBlur: 10
},
},
data: this.state.userAssetData.data
},
]
