Echarts 基础样式调整

1.鼠标悬浮不显示数据提示框

tooltip:{
    show: false,  //默认为true
}

2.鼠标悬浮不进行放大处理

series:[
    {
        hoverAnimation:false,        //默认为true
    }
]

3.禁止鼠标悬浮时的鼠标样式

series:[
    {
        silent:true,        //默认为true
    }
]

建议2,3搭配使用

4.外层圆及内层百分比圆设置,只需要设置第二个圆，不设置参数即可,60部分设置了背景色一个颜色，所以肉眼上隐藏了起来

演示图:

series: [
           {
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            silent: true,
            data: [   
              { value: 40 , itemStyle: { color: '#1890fe' } },
              { value: 60 , itemStyle: { color: '#fff' } }
            ],
            label: {
              //将视觉引导图关闭
              show: false,
            },
            itemStyle:{
              //设置的是每项之间的留白
              borderWidth:7,
              borderColor:'#fff'
            },
            // 初始化echarts的动画效果
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          },
          {
            name: '外边框',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            silent: true,
            center: ['52%', '50%'],
            radius: ['80%', '80%'],
            label: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 9,
                name: '',
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: '#2985e0'
                    }
                }
            }]
          },
],

5.圆形数据之间有间隔，通过itemStyle设置

series:[
    {
        itemStyle:{
            //设置的是每项之间的留白
            borderWidth:7,
            //留白颜色
            borderColor:'#fff'
        },
    }    
]

6.柱形图上面展示当前数据

 

series: [
          {
            name: "直接访问",
            type: "bar",
            data: [320],
            //通过设置itemStyle即可
            itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 16
						}
					}
				}
			},
          },
          //.....
]

7.扇形图扯出的那根延长线设置

 

series:[
    {
       name:'...',
       labelLine: {//设置延长线的长度
            normal: {
                length: 1,//设置延长线的长度
                // length2: 1,//设置第二段延长线的长度
            }
       },
    }
]