Echarts使用经验记录

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
    },
]