echarts配置项集合(不断更新)

135 阅读1分钟

一、legend换行并居中显示

image.png

legend: [{
           data: legend.slice(0, 2),
	   x: 'center'
	 }, {
	   data: legend.slice(2, 4),
	   x: 'center',
	   top: '6%'					
	}]

二、折线图的点加涟漪效果

image.png

在series中添加

{
     // 设置涟漪特效动画
    type: 'effectScatter',
    // 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
    coordinateSystem: 'cartesian2d',
    // 单个闪烁点 ↓
    data: [{
       value: ['20221025', 201],
       symbolSize: 12
    }], //2d坐标系--[x轴, y轴, 标记大小]
    // 多个闪烁点 ↓
    // 方法一 -- start:
    // data: [{value:['Mon',820],symbolSize:10},{value:['Tue',932],symbolSize:10}], 
    // 方法一 -- end
    // 方法二 -- start:
    // data: [['Mon',820],['Tue',932]], //2d坐标系--[x轴, y轴, 标记大小]
    // symbolSize: 10,
    // 方法二 -- end
    // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮(hover)的时候显示特效
    showEffectOn: 'render',
    // 涟漪特效配置
    rippleEffect: {
	// 波纹的绘制方式,可选'stroke'和'fill'
	brushType: 'stroke',
	period: 4,
	scale: 4
    },
    hoverAnimation: true,
    itemStyle: {
	normal: {
            color: '#33A5F3',
            shadowBlur: 50,
            shadowColor: '#33A5F3'
	}
    },
    zlevel: 1
}