Echarts的一些配置

前言

在此记录echarts使用过程中的一些配置。

开始

一、整体使用

以一个环形图为例：

html

<div id="myChart" :style="{width: '100%', height: '180px'}"></div>

js部分

drawChart(list) {
            let myChart= this.echarts.init(document.getElementById("myChart"));
            myChart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    data:['轻微','严重','一般','不可用'],
                    orient: 'vertical',  //垂直显示
                    y: 'center',    //延Y轴居中
                    x: '55%',
                    icon: "circle",
                    itemWidth: 10,  
                    itemHeight: 10, 
                    itemGap: 20,
                },
                color:['#302E77','#FFAB00','#9095FD','#FB6D40'],
                series: [
                    {
                        name: '告警信息',
                        type: 'pie',
                        center:['25%','50%'],
                        radius: ['65%', '85%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data:list
                    }
                ]
            })
        },

二、详细用法

1、图例显示

1> 图例显示多条数据信息，包括数值和百分比等，并设置一些样式，文字大小，左右对齐等。
例：

myChart.setOption({
		legend: {
                    data:['云主机','云数据库','其它'],
                    orient: 'vertical',  //垂直显示
                    y: 'center',    //延Y轴居中
                    x: '45%',
                    icon: "circle",
                    itemWidth: 10,  
                    itemHeight: 10, 
                    itemGap: 20,
                    formatter:function(name){  //该函数用于设置图例显示后的百分比
                        let value;
                        let total=0;
                        list.forEach((item)=>{
                            total += item.value;
                            if (item.name == name) {                                
                                value = item.value;
                            }
                        })
                        let arr=[];
                        if(total){
                            arr = [
                                '{a|' + name + '}',
                                '{c|' + value + '元}',
                                '{b|' + (((value / total) * 100).toFixed(2)) + '%}'
                            ];
                        }else{
                            arr = [
                                '{a|' + name + '}',
                                '{c|' + value + '元}',
                                '{b|' + '0%}'
                            ];
                        }
                        return arr.join(''); 
                    },
                    textStyle: {
                        rich: {
                            a: {
                            fontSize: 12,
                            verticalAlign: 'center',
                            width:50,
                            align: 'left',
                            padding: [0, 0, 0, 0],
                            color: '#9d9d9d'
                            },
                            b: {
                            fontSize: 12,
                            width:80,
                            align: 'right',
                            padding: [0, 0, 0, 10],
                            color: '#000'

                            },
                            c: {
                            fontSize: 12,
                            width:80,
                            align: 'right',
                            padding: [0, 0, 0, 0],
                            color: '#302E77'
                            }
                        }
                    }
                },
     })

2>图例显示部分，自定义隐藏某图例

如果数据格式是这样的 list : [ {name:‘包年包月’,value:50},{name:‘按需付费’,value:50} ]，
图例想隐藏按需付费，只显示包年包月，则可以像如下这样设置。

legend: {
            orient: 'vertical',
            icon: 'circle',
            data:['包年包月'],
            selected:{
              '按需付费':true
            }
          },

3>去掉（饼图）高亮

*******鼠标移入图上 禁止高亮：

 series:{
			silent:true
		}

*******鼠标移入图注 禁止高亮：

 legend：{
			selectedMode:false
		}

2、图注
鼠标移入图标某项，图注显示百分比或者其他信息。
tooltip里的formatter函数，我打印了一下它的参数param，是这样的。

里面的有各种需要的参数，且formatter函数里return可以写标签，想要什么自己随意拼接就可以。
如：

myChart.setOption({
   tooltip: {
                    trigger: 'item',
                    formatter: function(params){
                        console.log(params)
                        return `<div>${params.seriesName}<br/>${params.marker}${params.name}：${params.value}元（${params.percent}%）</div>`
                    }
                },
 })

3、图形

如图，移入环形图某一项，环形图消失。这是因为颜色设置太浅导致。


解决办法：

		//去掉圆环默认hover时高亮效果
        myChart.on('mouseover', e => {
          let op = myChart4.getOption()
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: e.dataIndex,
            color: e.color
          })
          myChart.setOption(op, true)
        })

摘自：https://www.cnblogs.com/x-llin/p/13825194.html

折线图

1.图形铺满整个区域

grid:{
	top:"50px",
	left:"5px",
	right:"5px",
	bottom:"50px",
	backgroundColor: '#fff',
	width:"auto", //图例宽度
	height:"100%", //图例高度
},

2.折线图从头开始

xAxis:{
	boundaryGap:false
}

3.加网格线

xAxis:{
	splitLine:{
			show:true
	},
},
yAxis:{
	splitLine:{
			show:true
	},
}

4.改变横纵坐标轴颜色

xAxis:{
	axisLine:{
		show:true,
			lineStyle:{
				color:'#c1c1c1'
		}
	},
},
yAxis:{
	axisLine:{
		show:true,
			lineStyle:{
				color:'#c1c1c1'
		}
	},
}

5.移入有标线显示

tooltip:{
	trigger:'axis',
	axisPointer:{
		type:'cross'
	}
},

6.去掉折线图上的小圆点

series:[
	{
		symbol:false
	}
]

7.折线图数据过多，横坐标轴只显示部分
（如：只显示8的倍数的）

xAxis：{
	axisLabel:{
		interval:(index,value)=>{
			if((index+1)%8 == 0){
				return true;
			}else{
				return false;
			}
		}
	},
}

8.改变折现颜色

series:[
	{
		itemStyle:{
			normal:{
				lineStyle:{
					color:'#529dff'
				}
			}
		}
	}
]

后记

以上，会陆续记录echarts的一些常用配置，方便自己和小伙伴们查看。